Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
The CSS2 pseudo-elements :before
and :after
, with the traditional single-colon notation, are supported by IE8 and later. They are not new to CSS3.
The double-colon notation, on the other hand, is new to CSS3. IE9 does support this new notation for ::before
and ::after
, and likewise for the CSS1 pseudo-elements ::first-line
and ::first-letter
. Going forward, however, no new pseudo-element may use the single colon syntax, and browsers (including IE) are expected to support the double colon syntax for all pseudo-elements.
I have no clue why that table says IE9 doesn't support the new pseudo-element syntax, because it certainly does according to the docs for the individual selectors linked above, and your test case. As well as, of course, this answer.
How to target ::before and ::after pseudo elements in Internet Explorer 9 Developer Tools?
Quoting from another answer:
IE 9 supports the notations ::after and ::before (with two colons) in “standards mode”. In “quirks mode”, it does not.
https://stackoverflow.com/a/14145917/5973334
So the only possible reason would be for something in you code to have activated the “quirks mode”
internet explorer 9 ignores before pseudo element
Check the doctype. On jsfiddle, this works fine in IE9: http://jsfiddle.net/4nGW9/. IE8 should handle this as well.
CSS3 IE9 click through pseudo-element?
Use a second select with zero opacity:
<!DOCTYPE html> <html> <head> <style> #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; } #fake { position: absolute; opacity: 0; } body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; } </style> </head> <span> <select id="real"> <option value="">Alpha</option> <option value="">Beta</option> <option value="">Charlie</option> </select> <select id="fake"> <option value="">Alpha</option> <option value="">Beta</option> <option value="">Charlie</option> </select> </span> </html>
CSS :after pseudo element doesn't work inside button in any IE version
You need to add overflow: visible
to button
.
<button>A button</button>
button {
position: relative;
overflow: visible;
}
button:after {
content: "Can u see me?";
position: absolute;
right: -100px;
top: 0;
}
http://jsfiddle.net/96ryusnp/1/
IE must set it to hidden
by default on buttons.
:after and :before CSS pseudo elements hack for Internet Explorer 7
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.
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
And if you are already using jQuery in your project than you can use this plugin
jQuery Pseudo Plugin
http://jquery.lukelutman.com/plugins/pseudo/
IE not displaying SVG as content in a pseudo element :before or :after
I have tested it with IE 11 and I am able to produce the issue. It seems that the pseudo-elements content attribute do not currently work on SVG elements. It can be possible that it is some kind of bug or it is IE browser default behavior. I will try to submit the feedback regarding this issue.
As a workaround, I suggest you display the svg content using background-image attribute, like this:
<style>
.div1:after {
content: '';
display: block;
height: 80px;
width: 80px;
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
}
</style>
<div class="div1" style="background-color:green; width:80px;height:80px"></div>
The result in IE 11 browser as below:
Edit:
I am not able to use my svg with background-image property whereas
your svg is loading with the property. Is there any problem with my
svg?
When we use SVG with background-image property, we should ensure that reserved URL characters are encoded (e.g. <
=== %3C
and >
=== %3E
) and also replace the space with '%20'.
So, please encode your svg element as below:
background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%22266.53926701570674%20152.66492146596858%2044%2044%22%3E%3Cdefs%3E%3Cpath%20d%3D%22M267.54%20153.66L307.54%20193.66L267.54%20193.66L267.54%20153.66Z%22%20id%3D%22d6AN4MEUYO%22%3E%3C%2Fpath%3E%3C%2Fdefs%3E%3Cg%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D%22%23d6AN4MEUYO%22%20opacity%3D%221%22%20fill%3D%22red%22%20fill-opacity%3D%221%22%3E%3C%2Fuse%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E);
Then, the result like this:
Css pseudo-element ::before(2); :before and ::before
The CSS spec on content describes all three syntaxes.
:before
-- outdated syntax for pseudo elements. Use if older browser support is needed such as IE8. IE9 supports the new syntax. It also seems like iOS Safari does not support the new syntax::before
-- new pseudo element syntax. This is equivalent to::before(1)
::before(n)
-- used to create multiplebefore
elements that can be before other::before
s. Details are in the same spec.- As far as I can tell, no browser supports this.
- http://jsfiddle.net/535Rf/
Related Topics
Browser Support for CSS :First-Child and :Last-Child
How to Make a Circle Around Content Using CSS
CSS Transitions with Calc() Do Not Work in Ie10+
How to Use Apple's New San Francisco Font on a Webpage
Styling Elements with a Dot (.) in the Class Name
Less Lists as a Mixin Argument(S)
Absolute Positioning Ignoring Padding of Parent
Styling the Arrow on Bootstrap Tooltips
CSS Select First Element with a Certain Class
Comparison of Loading CSS Inline, Embedded and from External Files
CSS Selector to Get Deepest Element of Specific Class in the HTML Tree
Prevent 100Vw from Creating Horizontal Scroll
CSS Equivalent of the "If" Statement
How to Make Twitter Bootstrap Modal Full Screen
How to Reverse the Order of Columns in Bootstrap 4
Calc() Not Working Within Media Queries