I am using :after and :before css pseudo elements and it is working fine in IE8, and all modern browsers but it is not working fine in IE7. Are there known hacks to work around this in IE7?
Join Stack Overflow to learn, share knowledge, and build your career.
|
|
||||
|
|
|
with any pure CSS hack it's not possible. Use IE8.js http://code.google.com/p/ie7-js/ It has support for this. http://ie7-js.googlecode.com/svn/test/index.html test page also there after - http://ie7-js.googlecode.com/svn/test/after.html before - http://ie7-js.googlecode.com/svn/test/before.html Edit after 1st comment You can just keep this js for IE6 and 7. other browser will not read it.
And if you are already using jQuery in your project than you can use this plugin jQuery Pseudo Plugin |
|||||||||||||||||||||
|
|
When needing support for :before and :after I use the following gist that I wrote. It's pure CSS (to the point were you just write CSS) but does include a CSS expression. Works in most cases. https://gist.github.com/2362483
|
|||||||||
|
|
If you're already using Modernizr, it has a core detect for "CSS Generated Content". You can then fill in the missing
jQuery to insert generated content directly into the DOM:
|
|||
|
|
|
To before and after you can use this:
|
|||
|
|
|
I was using IE8.js (http://code.google.com/p/ie7-js/) in a project and I had to remove it because it blocked IE7 between 10/15 secs. To mantain the content generated with :after and :before pseudo-elements, without IE8.js, I did the following:
I prefer this way rather than with javascript, because this will keep all selectors in the same place :) |
|||||||||||||||||||||
|
|
Well there is a pure CSS hack that works, sort of. It's black magic but is sometimes handy when used scarsely. It's explained here: HTML fragment:
CSS:
IE-specific stylesheet:
|
|||||||||||||
|
|
You can use CSS expressions to do this. For example you could plug a ♣ symbol via:
I wrote an article about this on Smashing Magazine, see http://coding.smashingmagazine.com/2011/03/19/styling-elements-with-glyphs-sprites-and-pseudo-elements/ |
|||||||||||||||||||||
|