Design, CG Graphics & Inspiration
Coding Icons with the Help of Pseudo-Elements and CSS Property Clip

Coding Icons with the Help of Pseudo-Elements and CSS Property Clip

A good way to code the icons located next to the titles, or as custom list markers is to create them with the help of pseudo-elements.

Formerly, I did it with the extra markup – for example, a [i] tag, which was positioned absolutely and was set with the background sprite image with icons.

This method lets you avoid the extra markup, but for earlier versions of IE you’ll need to write an expression, which will perform the insertion of a pseudo-element.

So, we have the header:

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

And we want to put the icon of the sprite before him:
Layout of Icons with the Help of Pseudo-Elements and CSS Property Clip

#anchor-header {
  position: relative;
  padding-left: 21px;
  background-image: expression(this.runtimeStyle.backgroundImage="none",
  this.innerHTML = '<img alt="" src="http://f.cl.ly/items/1l1g2a3A161P1f121r1m/blog-icons.png">'+this.innerHTML);
}
 
#anchor-header:before,
#anchor-header img {
  content: url(f.cl.ly/items/1l1g2a3A161P1f121r1m/blog-icons.png);
  position: absolute;
  top: 3px;
  clip: rect(4px 15px 18px 0);
  left: -14px;   
}

And we get header with the icon:
header-icon in Coding Icons with the Help of Pseudo-Elements and CSS Property Clip

Advantage of this method over the background technique:

• Unlike background images, these images are printed with the document (they are sent to the printer).
• No extra html-markup.

Example on jsfiddle

  • barba,
  • July 9, 2011

SHARE THIS POST

My name is Ivan Vasiliev. I've been doing html-coding, and javascript programming since 2005. For me it's not only a job or occupation, I'm really fond of it. So I'm trying to keep abreast of the latest trends in html-coding and do my work in a way, so that primarily I would be sitisfied with the result myself. For all the time that I work in this sphere I've coded a lot of different sites. Some of them you can see in my portfolio

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • Hi, this seems to be a very good possibility to locate icons next to headlines. But what happens if the client has javascript disabled?

    • I think it will work. It’s html+css without js.

      • Anonymous

        NO this.innerHTML is javascript it will not work if Javascript is disabled.This method is good but it’s invalid CSS for IE.

        But it’s OK for other browsers. Thanks for sharing

  • Hi, this seems to be a very good possibility to locate icons next to headlines. But what happens if the client has javascript disabled?

    • I think it will work. It’s html+css without js.

      • Anonymous

        NO this.innerHTML is javascript it will not work if Javascript is disabled.This method is good but it’s invalid CSS for IE.

        But it’s OK for other browsers. Thanks for sharing