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.
- Embarking on a Redesign
- CSS3 Property “img:after” in Firefox?
- Extending Wordpress to use "Home" Page as Homepage
- Sporkle! New And Improved
And .classThatRefersToImages:after {} does work?
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.
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
Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(/media/opera.jpg) is not within the allowed path(s): (/usr/local/www/www.noscope.com/:/var/tmp/) in /usr/local/www/www.noscope.com/web/wp-content/plugins/textile-2/class/Textile.php on line 2733
James AkaXakA said:
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
afterorbeforeon images.bramick said:
It’s working fine in Opera on my side:
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.
What about ::before?
James AkaXakA said:
Neither works, not when used on IMG or .classappliedtoimg.
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.
What about wrapping it in an object tag which links to the same image, and tag an :after onto that?
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.