Decorate Lists

In 2002, Mark Newhouse published an article called “ Taming Lists ”, a rather interesting part of which he devoted to explaining how to create custom lists decorated with pseudo-elements. Almost ten years later, Nicolas Gallagher invented a technique that uses pseudo-elements from sprites to create background images.
Segondia, based on the experience of giants, we will try to develop this topic. We will discuss how you can decorate elements without additional markup, using only the CSS sprite technique . The result will also work in Internet Explorer 6 and version 7.

Let's start with special characters

There are many symbols that we could use as images to create various markers. What can happen:

Example

These bullets (,,,) in the list above are created as follows:
HTML:

performance
usability
maintenance 
accessibility

CSS:

.glyphs {
list-style-type: none;
}
.glyphs li:before,
.glyphs b {
display: inline-block;
width: 1.5em;
font-size: 1.5em;
text-align: center;
}
.one,
.one:before {
content: "\2660"; /*  */
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♠'+this.innerHTML);
}
.two,
.two:before {
content: "\2663"; /*  */
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♣'+this.innerHTML);
}
.three,
.three:before {
content: "\2665"; /*  */
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♥'+this.innerHTML);
}
.four,
.four:before {
content: "\2666"; /*  */
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♦'+this.innerHTML);
}
.red b,
.red:before {
color: red;
}

How it works

• The value of the content property must point to a Unicode character in hexadecimal format (for IE we use HTML entities ).
• Internet Explorer 6 and version 7 does not support either :: before or : before , so we connect characters through CSS expressions.
• Internet Explorer 8 does not support :: before , but supports single-colon writing.
• Note that ignoring compatibility with various browsers, " there is no difference between : before and :: before , and between : after and :: after . The one-colon syntax (i.e .: before or : after-child ) is used to describe both pseudo-classes and pseudo-selectors in all versions of CSS prior to CSS3. With the introduction of CSS3, to distinguish pseudo-classes from pseudo-elements, the former are written using a single colon, the latter using a double colon. "
• In Internet Explorer, characters are wrapped in elements , therefore, we have the ability to somehow point to them and style (you most likely will want to use classes for these purposes).

Note that the CSS expressions we use here are no worse than those we use to simulate min-width and the like . It is calculated once, which subsequently should lead to a slight increase in productivity.

Displaying images through pseudo-elements

The main advantage of using a pseudo-element to display images is that it allows you to use sprites. Actually, this is nothing new, and many sites already use additional (so-called "garbage") markup to achieve this goal. For example, Yahoo! Search uses an empty tagand Facebook . Following this path, you can create compact CSS sprites without any empty areas.
The following two examples do not use additional markup based on the same sprite:



Both images below - the second icon in the sprite - are created using two methods, respectively.

Nicholas Gallocher's Method

Styling a pseudo-element using a background image:

#first:before {
content: "";
float: left;
width: 15px;
height: 15px;
margin: 4px 5px 0 0;
background: url(sprite.png) -15px 0;
}

New method using url () / clip

We use the content property to insert the sprite, which is then cut into the clip:

#second {
position: relative;
padding-left: 20px;
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = ''+this.innerHTML);
}
#second:before,
#second img {
content: url(sprite.png);
position: absolute;
top: 3px;
clip: rect(0 30px 15px 15px);
left: -15px; /* to offset the clip value */
_left: -35px; /* some massaging for IE 6 */
}

If you are suddenly wondering why I use position: absolute above , I explain: because the clip property applies only to elements that are positioned absolutely.

New way: how does it all work?

• Instead of decorating the pseudo-element with some background, we use it to insert the image (via the content property )
• Using the clip property, we “cut out” from the image only the part that we want to display. This means that there is no need to add to the picture the empty space in order to avoid the display of other of its parts (usually used as a background image for the b of lshih elements).
• We compensate for clip values using the left and / or top properties

If you do not need to crop the images, the images in the sprite should be aligned to the right or left edge for placement, satisfying the RTL / LTR context ( background-position: [left] [right] [vertical value] ). Another limitation will be the creation of sprites with images following each other (other parts of the image may also be displayed). In the process of "cutting" the sprite, these nuances do not play any role, therefore, the pictures can be docked with each other.
See example below:

The advantages of this method over others

The style that is used in printing
Unlike background images, these images are printed with the document (they are sent to the printer).

A style that is accessible
Unlike background images, these images will not disappear in high contrast mode in Windows or in high contrast style sheets .

Style that works in Internet Explorer 8
This method also works in Internet Explorer versions 6 and 7.

Note that the data: URI scheme can be used with an extra HTTP request . Internet Explorer does not support data: URI schemes, but we can use MHTML for Internet Explorer 6/7, which will allow older browsers to understand them.

Decorate links with pseudo-elements

Nicholas Gallagher shows a lot of interesting chips that can be done using pseudo-elements. The only thing I added here is the use of :: after in link styles, as in the example below:
CSS:

.more,
.more:after {
white-space: nowrap;
content: " \00BB"; /* » */
background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = this.innerHTML+' »');
}

A few words about usability

You will have to put up with the fact that all content is displayed on the screen , and since there is no mechanism for assigning alternative text to images that are added through the content property, you should make sure that these images are used purely for decorative purposes. Otherwise, users simply will not have access to this information.

Additional material

You might want to visit the following resources:

• CSS3 module: Lists - The :: marker pseudo-element
• Generated content, automatic numbering, and lists
• The clip property
• Color Contrast and CSS Sprite Maps
• High Contrast Proof CSS Sprites

Icons by FatCow Web Hosting

ps Comments on the translation and greetings :) are accepted in PM.
pps In a couple of places I replaced the text with a picture, a live example can be seen in the original.