780

Rediscovering generated content

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg This

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.

A puppy dog puppetFigure 1. A puppy dog puppet

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

Generated content can be inserted before and after the real content of an element through the :before and :after pseudo-elements, respectively. To represent them, we can use the following fictional markup.

Listing 1. Fictional markup for :before and :after

  1. <p>
  2. <before>Start</before>
  3. Real content
  4. <after>End</after>
  5. </p>

And our CSS will be:

Listing 2: :before and :after in the CSS

  1. p:before {
  2. content: "Start";
  3. }
  4. p:after {
  5. content: "End";
  6. }

View the exampleView the screenshot

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.
<string>
A textual string enclosed in matching quotes.
url()
This function allow us to insert an external resource (usually an image), as in the background-image property.
counter(), counters()
These functions insert counters. See below for more details.
attr(attribute)
This function allow us to insert the value of the attribute attribute of 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.

Inserting strings

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

  1. p:before {
  2. content: "\00A7";
  3. padding-right: 0.2em;
  4. }

View the exampleView the screenshot

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

  1. p:before {
  2. content: "( " "\00A7" " )";
  3. padding-right: 0.2em;
  4. }

View the exampleView the screenshot

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.

Inserting images

We can insert images through the url() function.

Listing 5. Inserting images

  1. a:before {
  2. content: url("../img/link.gif");
  3. padding-right: 0.2em;
  4. }

View the exampleView the screenshot

As we can see, this function works exactly as in the background-image property.

Inserting attribute values

An attribute value of an element can be inserted through the attr() function.

Listing 6. Inserting attribute values

  1. a[href]:after {
  2. content: "( " attr(href) " )";
  3. padding-left: 0.2em;
  4. color: #000;
  5. font: small "Courier New", Courier, monospace;
  6. }

View the exampleView the screenshot

We’ve just inserted the value of the href attribute that, as you can see, is a simple textual string.

Inserting counters

See my article on CSS counters.

Download examples

examples.zip

prajapat