Last Updated: February 25, 2016
·
3.088K
· netzach23

:before and :after for IE7

CSS:

#element {
    display: inline;
    height: 20px;
    background-color: #ccc;

    *zoom: expression(
        this.runtimeStyle.zoom="1",
        this.insertBefore(
            document.createElement("div"),
            this.childNodes[0]
        ).className="before",
        this.appendChild(
            document.createElement("div")
        ).className="after"
    );
}
#element span {
    display: block;
    float: left;
}
#element::before, #element .before {
    display: block;
    width: 10px;
    height: 20px;
    background-color: #eee;
    float: left;
}
#element::after, #element .after {
    display: block;
    width: 10px;
    height: 20px;
    background-color: #c0c;
    float: left;
}

HTML:

<a id="element"><span>String</span></a>

2 Responses
Add your response

it's ugly and beautiful at the same time. i love it. in fact, i think its beauty comes from its ugliness -- there is some serious abuse of IE7's quirks and 'featurea' here, and that's just fine with me. IE7 deserves to be abused.

over 1 year ago ·

@pdaoust

In my opinion, IE7 should be just ignored but some of the Clients doesn't thinks so.

By the way, i really like IE's attempt to give us the opportunity to enhance the CSS by JS.
The expression property as well as the behaviour: *.htc

i would like to see some kind of this in the next generaton of CSS to enable really dynamic stylesheets and get rid of jQuery design enhancements

over 1 year ago ·