Recipe 5.4. 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 autogenerated content (see Figure 5-5):

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 5-5. 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. The content of simple keyboard characters can be easily inserted like so:

li:before {  content: ">> ";  }

However, for embedding special characters, the CSS 2.1 specification calls for special characters to be Unicode (ISO 10646) values. So you need to write out the character in its escaped Unicode hexadecimal equivalent and not the usual HTML 4 entities like ».

You escape values in CSS by inserting a backslash before each Unicode hexadecimal value:

li:before {  content: "\00BB \0020";  }

At press time, this solution worked in Mozilla, Firefox, Netscape 6+, Safari, and Opera browsers because they can handle the creation of autogenerated content. Unfortunately, this list omits Netscape 4 and Internet Explorer for Windows and Macintosh as they cannot do autogenerated content.

To create a cross-browser effect, don't use autogenerated content. Instead, insert the text marker manually before the list item:

<ul>  <li>&#187; I'm not the Same Person I was in the Database</li>  <li>&#187; Past Breaches of Our Privacy</li>  <li>&#187; The Best of Intentions</li>  <li>&#187; Whatever Happened to Automation?</li>  <li>&#187; The Smart Choice is Not Needing to Make One</li> </ul>

The main drawback with this approach is that you have two markers for every list item (the browser generated list marker and the manually inserted text marker) if CSS is turned off in the browser and the user see only the content. Although this isn't a mission-critical problem, it adds an unneeded design element to the web page.

Recipe 5.4. Creating Custom Text Markers for Lists

Problem

Solution

Figure 5-5. Text marker for a list

Discussion

See Also