The list properties describe basic visual formatting of lists: they allow style sheets to specify the marker type (image, glyph, or number), and the marker position with respect to the principal box (outside it or within it before content). They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position with respect to the principal box, these may be derived from the principal box.
So we have to try another way to control the visual layout for list markers. Usually a common solution would be something like this:
<ul> <li><span>Item one</span></li> (omissis) </ul>
Then we set the color for the <li> element and a different color for the <span> element. Very rough. This is a typical example of superfluous markup. Although a good idea lies between the lines of the specs, many designers use the previous one, flaunting a backward-compatibility with Internet Explorer 6 (and lower versions). Nonsense! Didn't they read the news? Forward-compatibility is the key.
ul#marker {
list-style: none;
}
ul#marker li {
margin: 1.3em 0;
padding: 0;
}
ul#marker li:before {
content: '\25A0';
color: #dd0000;
padding-right: .2em;
}
First we reset the default marker of the unordered list using the 'list-style' property set to 'none'. Then we discover the real power of generated content:
ul#marker li:before {
content: '\25A0';
color: #dd0000;
padding-right: .2em;
}
The :before pseudo-element allows us to insert content before the selected element. The 'content' property creates the string through its hexadecimal code (Unicode '\25A0'). Note that '\25A0' is escaped ("\") and enclosed between single quotes. We add more style informations through the 'color' and 'padding' properties, gaining an excellent control over the generated content.
What's more:
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).