css :after will not work

Question

i have a css prop like stated

#menu li#selected { padding: 0 10px; margin:0; background:url(nav-tab-left.gif) bottom left no-repeat #90288d; height: 35px; }

after the li i need to display the second part of the image nav-tab-right.gif

i try

#menu li#selected:after { background:url(nav-tab-right.gif) bottom right no-repeat; }

but this returns inconclusive

Answer 1

Without a "content" property in the CSS, :after will do nothing. It selects for a pseudo-element representing the last child of the element is it applied to (a sort of virtual element which is a child of li#selected, in your case).

It's not a "placeholder" reference like regular expressions can do with start- and end-of-line; you actually have to provide a content property for it, which will be rendered but will not become part of the DOM tree. That content can be an empty string, but it must still be specified:

#menu li#selected:after
{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red; 
}

That should give an idea of what's achievable.

Answer 2

Building from your previous question's HTML.

IE7 and below doesn't support the :after pseudo-element. Use something like this instead:

HTML:

<li id="selected"><a href="http://www."&gt;FAQ'S&lt;/a&gt;&lt;/li&gt;

CSS:

#menu li#selected {
  padding: 0;
  margin:0;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

This will work in all browsers and doesn't rely on :after which IE7 and below doesn't support.

---

Hover Variation

Another advantage of using this method is that you can modify it slightly to allow for CSS rollover images that will be compatible with IE6 as such:

HTML:

<li id="selected"><a href="http://www."&gt;&lt;span&gt;FAQ'S&lt;span&gt;&lt;/a&gt;&lt;/li&gt;

CSS:

#menu li#selected {
  padding: 0;
  margin:0;
  height: 35px;
}

#menu #selected a {
  display: block;
  background:url(nav-tab-left.gif) bottom left no-repeat #90288d;
  height: 35px;
  padding: 0;
  margin: 0;
}

#menu #selected a span {
  display: block;
  background:url(nav-tab-right.gif) bottom right no-repeat;
  height: 35px;
  line-height: 35px; /* Centers the text vertically */
  padding: 0 6px;    /* Gives 6px of horizontal padding to the text */
  margin: 0;
}

/* Hovered, so let's change the colors and the images */
#menu #selected a:hover {
  background:url(nav-tab-left-hover.gif) bottom left no-repeat #902B27;
}

#menu #selected a:hover span {
  background:url(nav-tab-right-hover.gif) bottom right no-repeat;
}

Yes, it does work on IE6 and below (and above) since a is the only element for which IE6 supports the :hover pseudo-class. It is also the reason why this method requires adding an additional <span> tag as we cannot target the <li> with :hover in a way which IE6 understands.

_{I do recommend using CSS sprites instead of separate images for the hover effect, but to keep this example as simple as possible, I will keep it as such.}

For more information about CSS selectors support, see CSS - Contents and compatibility.