CSS3 Property "img:after" in Firefox?

The code is fairly simple: img:after { content: “Hello World”; }. It displays the text “Hello World” right after an image. It works in Opera, but not in Firefox! Why is that? Isn’t Firefox supposed to be the new black?

For those of you pondering the Why of this, try out img:after { content: “(” attr(alt) “)”; } for show. It’ll type out the contents of the ALT attribute after an image.

11 thoughts on “CSS3 Property "img:after" in Firefox?”

  1. And .classThatRefersToImages:after {} does work?

  2. bramick says:

    Good to know. This seems like a solution that could be used for headers or other areas that are more generic. From a content standpoint it seems as though it could make development more cumbersome…. and for what advantages. I’ve been getting pretty deep in CSS lately on my current work project.

    On second thought this would be a great way to add a copyright notification. Can the CSS insert html? For ex:

    img:after { content: “Copyright 2006 <a href="http://www.....“;}

    I’ll test that theory out and let you know.

  3. bramick says:

    Is anyone seeing this in Opera? I can’t get the orginal suggestion or the modified version to work.

    http://www.blakeramick.net/css/img-css.htm

  4. Joen says:

    James AkaXakA said:

    And .classThatRefersToImages:after {} does work?

    I hadn’t tested that. Now I have. No, it doesn’t work.

    Say we have .testClass::after { content: “test”; } applied to a DIV, a SPAN and an IMG.

    Opera will show “test” after all three tags. Firefox will only show for the DIV and the SPAN.

    Apparently it doesn’t matter whether it’s the tag, or a class. Firefox just won’t use after or before on images.

    bramick said:

    Is anyone seeing this in Opera? I can?t get the orginal suggestion or the modified version to work.

    http://www.blakeramick.net/css/img-css.htm

    It’s working fine in Opera on my side:

  5. bramick says:

    Ahh, must be because I’m running a Opera on OSX. If you view the source it looks as though only the alt attribute is being shown… eventhough I have both defined in the CSS.

    So my content: <a href idea didn’t work.

  6. What about ::before?

  7. Joen says:

    James AkaXakA said:

    What about ::before?

    Neither works, not when used on IMG or .classappliedtoimg.

  8. Mark Michon says:

    I have actually come across this problem myself recently in an attempt at some image overlay framing.

    From what I can gather the usage is unstable and that is why it has been taken out of FF. Apparently it was in earlier builds though.

    Anyway the closest thing to a workaround I can find is to surround your image with a link:


    a:after{
    content: "Hello World";
    }

    We know this works, so just shove the image inside.

    Sadly I’ve come up with nothing workable for my situation, but if you are going to be linking the images anyway this approach should cover it.

  9. What about wrapping it in an object tag which links to the same image, and tag an :after onto that?

  10. kloevekorn says:

    This behavior of FF and Safari is really a pity! Putting the image in divs is an idea, but won’t help in my case:

    I need to print out the alt-tag as the image-caption, since the tinyMCE-Editor in my CMS does not provide a caption field but the alt-element.

    Other solutions to use with the tiny would effort larger hacks than the pseudo elements.

  11. anonymous coward says:

    There are many bugs on mozilla’s bugzilla regarding this behaviour in Firefox. 245633 is specific to img tags and 169334 is more generic in scope.

    www-style also has at least one thread about generated content and replaced inlines

    The comments are old but a bug was marked a dupe as recently as 2008-05-29. If the css3 spec now explicitly allows this behaviour then a new bug should be filed on bugzilla pointing out the change. If the css3 spec forbids generated content on replaced inline tags then Opera is wrong in this behaviour.

    It’s an interesting quirk that I just stumbled across while trying to write a custom style in stylish for xkcd to display the title on each comic. Maybe I’ll follow the story to its conclusion later and see what the css3-specified behaviour is and what it would take to change it to work as expected.

Comments are closed.