:Before and: After Selectors on Internet Explorer

: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 +)

Use after: and before: selectors in versions 6 and 7 of Internet Explorer

The before and after css elements should work in ie8 and up.

For IE7 you can use something like Use the IE7.js hack to add after & before pseudo element support.

I would recommend using a conditional statement to include the file such as;

<!--[if IE 7]>
    insert script here
<![endif]-->

For IE6, I personally would not bother and just degrade gracefully.

Another option is to use ie-css3.js.

: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/

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.

Internet Explorer isn't treating non-empty ::before and ::after as children elements

This does indeed appear to be a bug with IE's handling of pseudo-elements and the visibility property. Microsoft was able to reproduce it in response to this issue.

It's worth noting that Microsoft Edge does not appear to exhibit this bug.

IE crossing out pseudo element CSS?

This is a known issue, but the styles are in fact being applied. The developer tools thinks the pseudo-element styles are being overridden by the parent-elements corresponding styles. This is easily demonstrated by inspecting the Computed style of the parent-element and looking at (what the F12 tools believe to be) competing styles:

Again, however, these styles are in fact being applied to the correct elements - regardless what the developer tools believe or suggest. You can confirm this by running over the parent-element and the two pseudo-elements and logging their computed height:

(function () {

    var el = document.querySelector( ".newbutton" );

    [ "", "::before", "::after" ].forEach(function ( e ) {
        // Output: 74px, 80px, 80px
        console.log( window.getComputedStyle( el, e ).height );
    });

}());

I'll check to see if we already have an internal issue tracking this bug, and add this question to it. Generally speaking, we try to give issues like this the amount of attention proportional to the amount of grief the issue is causing in the real world. So having your question as a new addition on the ticket may help us move a fix forward :)

CSS before and after pseudo elements not working in Edge and IE 11

You need to change #fff0 to rgba(255, 255, 255, 0) or transparent in your CSS border-right: 10px solid transparent; and border-left: 10px solid transparent;. It's not liking the formatting of the colors.

IE and Edge don't seem to support that format.

Here's a working example:

a { text-decoration: none }.container { margin: 20px; }.font-jos {  font-family: Verdana;}.btn-ribbon {  position: relative;  display:inline-block;  padding: 13px 11px;  background-color: #b46b78;  color: #fff;  font-size: 15px;  line-height: 18px;  font-weight: 700;  letter-spacing: 0.05em;  border-radius: 0;  border: none;  margin-left: 20px;  text-transform: uppercase;}.btn-ribbon:before {    content: "";    position: absolute;    top: 0;    left: -10px;    display: block;    width: 0;    height: 0;    border-top: 22px solid #b46b78;    border-bottom: 22px solid #b46b78;    border-left: 10px solid transparent;    z-index: 1;}.btn-ribbon:after {    content: "";    position: absolute;    top: 0;    right: -10px;    display: block;    width: 0;    height: 0;    border-top: 22px solid #b46b78;    border-bottom: 22px solid #b46b78;    border-right: 10px solid transparent;    z-index: 1;}

<div class="container">  <a href="#" class="btn font-jos btn-ribbon">Read more</a></div>

CSS :before/:after Selectors in IE 6,7

of course jQueries before and after

what else ;)

---

Related Topics