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