Nesting icons with pseudo-elements and css clip properties

A good way to lay out icons located next to the headers, or as non-standard list markers, is with pseudo-elements.

I used to do this with the help of additional markup - for example, the <i> tag, which I positioned absolutely and set the background image sprite with icons.

This method allows you to avoid additional markup, but for IE under the 8th you need to write an expression that will insert the pseudo-element.

So, there is a headline:

< h1 id = "anchor-header" > Title < / h1 >

And before it we want to put an icon from the sprite:

')

# anchor-header {
position : relative ;
padding-left : 21px ;
background-image : expression ( this .runtimeStyle .backgroundImage = "none" ,
this .innerHTML = '<img alt = "" src = "https://habrastorage.org/getpro/habr/post_images/09d/0ed/ce7/09d0edce7dbfd104c807e273376dc8f8.png">' + this.innerHTML ) ;
}

# anchor-header : before ,
# anchor-header img {
content : url ( habrastorage.org/getpro/habr/post_images/09d/0ed/ce7/09d0edce7dbfd104c807e273376dc8f8.png ) ;
position : absolute ;
top : 3px ;
clip : rect ( 4px 15px 18px 0 ) ;
left : -14px ;
}

We get the title with the icon:

Compared to the way where the icon is made by background, the advantages are as follows:

• When printing, the icon will be displayed, because it is set using <img>, not the background;
• No additional html markup is needed.

Jsfiddle example