css - How to make pseudo elements work while browser is in compatibility mode?

Question

 .divClassGreen{

       border-bottom:4px solid  white;   
       position: relative;
}
.divClassGreen:before{


       border-bottom:5px solid  white;   
       content: '';
        position: relative;
         top: -6px;
        right: -6px;
        bottom: -6px;
        left: -6px;
}  
.divClassGreen:after{


       border-bottom:5px solid  green;  
       content: '';
        position: absolute;
        top: -11px;
        right: -2px;
        bottom: -9px;
        left: -2px; 

}

This is my css , but the before and after are not working when my IE 8 is in compatibility mode. Is there any solution for the same?

Answer 1

You can use the Modernizr JavaScript library to detect browsers that don't support :before and :after (such as early versions of IE), and then use JavaScript to emulate those selectors. To download only the part of the library that you need, you can go to this link (the appropriate checkbox is already selected). Then, you can add two extra classes to your CSS that mimic the styles of .divClassGreen:before and .divClassGreen:after:

.divClassGreen:before, .divClassGreenBefore {
    /* blah */
}  
.divClassGreen:after, .divClassGreenAfter {
    /* more blah */
}

Finally, use JavaScript to add empty div tags before and after .divClassGreen (empty because you have content: '') that have the styles .divClassGreenBefore and .divClassGreenAfter:

//If the browser doesn't support generated content (:before and :after)
if (!Modernizr.generatedcontent) {

    var divClassGreen = document.getElementsByClassName("divClassGreen"); //returns a NodeList

    //Create the equivalents of :before and :after
    var divClassGreenBefore = document.createElement('div');
    var divClassGreenAfter = document.createElement('div');

    //Add the appropriate classes
    divClassGreenBefore.className = 'divClassGreenBefore';
    divClassGreenAfter.className = 'divClassGreenAfter';

    //Iterate through the NodeList, which adds the element before and after each .divClassGreen
    for (i = 0; i < divClassGreen.length; i++) {

        //Adds before
        divClassGreen[i].parentNode.insertBefore(divClassGreenBefore, divClassGreen[i]);

        //There's no insertAfter, so imitate it by using insertBefore on the hypothetical (next) sibling of divClassGreen
        divClassGreen[i].parentNode.insertBefore(divClassGreenAfter, divClassGreen[i].nextSibling);
    } 

}