How to Get CSS Pseudo Element: Checked to Work in Ie7 + Ie8

How can I get css pseudo element :checked to work in IE7 + IE8?

Have you tried IE9.js ?

http://code.google.com/p/ie7-js/
http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html
http://ie7-js.googlecode.com/svn/test/index.html
http://ie7-js.googlecode.com/svn/test/checked.html

How can I get a css pseudo element :checked to work in IE8 without Javascript?

While IE8 understands adjacent sibling selectors, it doesn't understand the checked pseudo-element, so, unfortunately, you can't make your code IE8-friendly by using CSS only.

Take a look at Selectivizr or IE7.js for a JavaScript solution.

Is there a way to trick IE7 into using the pseudo elements :after and :before?

Haven't tried it myself.

But I have a bookmark for some time now.

Check it out: http://forabeautifulweb.com/blog/about/enable_css_pseudo-element_selectors_in_internet_explorer_with_ie-css3.js/

EDIT:

Make sure you also read the comments which contains also some useful info (jQuery for example)

CSS pseudo-classes :focus and :active not working with the ~ combinator in IE8

:focus for a tags only happens when you use the tab key to get the link you want. :active for a tags is the equivalent of onmousedown.

how to apply css3 to pseudo-elements in IE8

IE7 does not support :before and :after generated content, so the content itself is emulated using a combination of the VML DOM and the HTML DOM, then CSS3 emulation is applied on those elements using DHTML filters and transitions behind the scenes using ie7.js and css3pie. IE8 does support :before and :after generated content, but ironically this breaks the CSS3 emulation layer, because generated content has no DOM of its own and there is no shadow DOM. Use conditional comments to create duplicates of the :before and :after content for IE8 only, position them to match their location in IE7, then apply the css3pie effects on them instead.

:before and :after selectors on internet explorer

You don't need absolute positioning for the pseudo elements. You can achieve the desired layout with display:inline-block; on pseudo elements :

DEMO

CSS :

.caption-wrap .line-3:before,
.caption-wrap .line-3:after {
    content: " ";
    display:inline-block;
    width: 50px;
    height: 5px;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    margin: 7px 10px 0;
}

Tested on IE 11 but this should work on all versions supporting pseudo elements (IE8 +)

Is there a faster way to give :before and :after selector support in IE7?

From the comments:

If you have zillions of :before and
:after, the cause of the problem could
be IE7's slowish JavaScript engine -
if this is the case, I think you're
out of luck - IE7.js is probably as
efficient as you're going to get.

and:

@thirtydot I have a page with only one
:before and :after and that is taking
about 7-9 seconds, so I think you are
right about it being the number of
selectors I'm using.

IE7 :(

My unicode for a check symbol in CSS not displaying in IE7

IE 7 does not support generated content (:before and :after pseudo-elements) at all. So the problem has nothing do with support to the CHECK MARK “✓” character, as you can see by testing with that character in HTML content (written as ✓ if needed) and with generated content using some common character, say content: 'X' (it won’t work either).

If IE 7 is relevant, consider adding the symbol into actual document content instead of generating it with CSS. You might consider doing this with JavaScript if it needs to be dynamic (in a browser).