In this article I’ll discuss some possible uses of generated content. Generated content is a powerful feature of CSS. Before going on, I’d like to explain what generated content is not. Let’s take a look at the following picture.
The picture depicts a puppy dog puppet. Of course this is not a real puppy, but only an abstraction. By the same token, generated content is not real content but only an abstraction. More precisely, generated content doesn’t exist in the document tree nor is parsed with the rest of the document. We can say, in other words, that generated content is only pseudo-content. For example, when we insert a string through generated content, the text inserted is not selectable. That’s why generated content lives only in the style rules.
Table of contents
- Inserting generated content
- Inserting strings
- Inserting images
- Inserting attribute values
- Inserting counters
- Download examples
Inserting generated content
Generated content can be inserted before and after the real content of an element through the
:after pseudo-elements, respectively. To represent them, we can use the following fictional markup.
Listing 1. Fictional markup for :before and :after
And our CSS will be:
Listing 2: :before and :after in the CSS
As we can see, the property that actually inserts the two strings is
content. This property accepts the following values:
- none, normal
- The pseudo-content is not generated.
- A textual string enclosed in matching quotes.
- This function allow us to insert an external resource (usually an image), as in the
- counter(), counters()
- These functions insert counters. See below for more details.
- This function allow us to insert the value of the attribute
attributeof the given element.
Keep in mind that generated content takes up its own space on the page and its presence affects the space’s computation of the element that hosts it.
In the previous example, we’ve inserted two simple strings before and after the real content of an element. Generated content allows us to insert also more complex symbols through escaping.
Listing 3. Inserting a symbol
The escaped sequence inside the double quotes is a hexadecimal Unicode value that refers to a paragraph symbol. We can also combine simple strings with Unicode symbols, as shown below.
Listing 4. Inserting a simple string and a symbol
content: "( " "\00A7" " )";
Keep in mind that all the textual content inside the
content property is treated literally, that is, spaces and tabulations inserted via the keyboard will be inserted in the page as well.
We can insert images through the
Listing 5. Inserting images
As we can see, this function works exactly as in the
Inserting attribute values
An attribute value of an element can be inserted through the
Listing 6. Inserting attribute values
content: "( " attr(href) " )";
font: small "Courier New", Courier, monospace;
We’ve just inserted the value of the
href attribute that, as you can see, is a simple textual string.
See my article on CSS counters.