:after and :before css pseudo elements hack for IE 7


This document describe a hack to simulate :after and :before css pseudo elements in IE 7.

CSS pseudo elements :after and :before are not supported by IE 7 and if you need to offer the same user experience in as many browsers as possible (included legacy ones) without creating extra code (css/javascript/html/etc), you can use this technique I found in Stack Overflow.

Kudos to the user vieron who found this hack!!.

See the original answer on the next link: :after and :before css pseudo elements hack for IE 7

css hack within an example:

<!DOCTYPE html>
<html lang="en" class="no-js">

            .teaser {
                *zoom: expression( 
                    this.appendChild( document.createElement("small") ).className="after"

            .teaser .after {
                content: '';

        <div class="teaser">

In the example the idea is simple, add a "block" after an element with the class "tabs" in this case a <div>, in modern browsers there is no problem using .teaser:after { }, and for IE 7 the magic occurs inside *zoom: expression() (lines 7-10) that creates and adds a new element of the type "small" with the class name "after", now all you need to do is extend the css rule so now can be applied to .teaser:after and .teaser .after { } (lines 13-20)

Hope you find this information useful!!

About the author

Enterprise Web Developer
Joaquin is an Enterprise Web Developer at Base22 with over seven years of experience designing and developing web solutions for enterprise clients. He is a well rounded web developer with skills building interfaces in IBM WebSphere Portal and WCM, IBM Connections, and many others. He is an Oracle Certified Java Developer and a Microsoft Certified Visual Studio Developer. He blogs at http://j-arellano.com