SELECTORS - CSS: Professional Techniques for Modern Layout - page 65

GENERATING CONTENT
In a move that blurs the usual line between content and presentation, CSS of ers a way to
generate content and insert it into the document. h is is done using the pseudo-elements
:before and :after and the property content .

Here's a basic example (also illustrated in Figure 2-22) of inserting content, putting a short
string in front of the text of any list item's text:

li:before { content : "Item: " ; border-bottom : 1px solid gray ;}

Figure 2-22: Prefacing list items with a little content.

67

Note the space inside the content value. h is is inserted as part of the value string. If it were
not there, the element text would be closer to the generated content unless a right padding
were applied to the generated content (which is completely possible; we just didn't do it here).

To be clear, you can insert only text, not structure. If you try to put markup into your
content value, it will be passed into the page as raw text (see Figure 2-23).

li:before { content : "<em>Item:</em> " ; border-bottom : 1px solid gray ;}

Oops.

On the other hand, you can insert any character glyph the browser is capable of supporting
(see Figure 2-24). All you need is to know its hexadecimal character number. Precede it with a
back-slash, otherwise known as an “escape,” and you're set.

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