CSS Cookbook

4.3. Creating Custom Text Markers for Lists

Problem

You want to use a custom text marker in a list.

Solution

Indent the first line of text and insert the custom text, along with the right-angle quotes acting as pointers, through auto-generated content (see Figure 4-3):

ul {
 list-style: none;
 margin: 0;
 padding: 0 0 0 1em;
 text-indent: -1em; 
}
li {
 width: 33%;
 padding: 0;
 margin: 0 0 0.25em 0;
}
li:before {
 content: "\00BB \0020"; 
}

Figure 4-3. Text marker for a list

Discussion

Setting the list-style property to a value of none turns off the list marker usually associated with a list. Typically, a marker is appended to the left of each list item.

Instead of appending the marker to the list item, the custom text marker will be placed inline with the content of the item. Because the text marker is inside the list item, you need to push the marker out of the list item box. Indenting the first line of the marker with a negative value creates this push. The negative value for the text-indent property moves the first line to the left, whereas a positive value moves the indent to the right:

ul {
 list-style: none;
 margin: 0;
 padding: 0 0 0 1em;
 text-indent: -1em; 
}

The :before pseudo-element generates the text marker. Because the marker used in this example falls outside of the American Standard Code for Information Interchange (ASCII) 256-character set, its numerical equivalent needs to be determined. ...