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