Defining the Content to be Inserted

The content property is extremely versatile. It accepts any of the following values:

• none The pseudo-element is not generated.
• normal Same as none.
• A string: Literal text that is to be inserted.
• url() An external resource, usually an image.
• A counter: A function that generates a numbered sequence.
• attr(x) Use the value of the x attribute in the selected element.
• open-quote Insert an opening quote as defined by the quotes property.
• close-quote Insert a closing quote as defined by the quotes property.
• no-open-quote Omit the opening quote, but move to the next level of nesting.
• no-close-quote Omit the closing quote, but move up to the previous level.

Apart from the none and normal keywords, you can combine any of these values as a space-separated list to create complex content that is injected before or after an element.

Inserting Images and Text

Using the ::before and ::after pseudo-elements to insert images, text, or a combination of the two can be useful in situations where you need to label elements in a consistent way. For example, throughout this book points of interest are highlighted as Notes, Tips, or Cautions. The styles in image_text.html use the following three classes to mark up paragraphs in a similar way (see Figure 15-1):

.note::before {
    content: url(images/square_gray.gif) ' Note ';
    font-weight: bold;
}
.tip::before {
    content: url(images/square_gray.gif) ' Tip ';
    font-weight: bold;
}
.caution::before {
    content: url(images/square_gray.gif) ' Caution ';
    font-weight: bold;
}

The ::before pseudo-element is appended to the selector in the same way as a pseudo-class. In this example, each selector is a class, but you can use any valid selector. The value specified for content begins with the path to the gray square image, followed by a space and the text in quotes. It doesn’t matter whether you use single or double quotes, as long as they’re a matching pair. I’ve added a space on either side of the text to separate it both from the icon and from the following text.

Normally the generated content is displayed inline, and the text inherits the same properties as the text in the element it’s being added to. But you can style the generated content like any other element.

The styles in text_image_display.html adapt the classes in the previous example like this:

.note::before {
    content: url(images/square_gray.gif) ' Note ';
    font-weight: bold;
    display: block;
}
.tip::before {
    content: url(images/square_gray.gif) ' Tip ';
    font-weight: bold;
    display: inline-block;
    vertical-align: 24px;
}
.caution::before {
    content: url(images/square_gray.gif) ' Caution ';
    font-weight: bold;
    color: #F8A809;
    font-size: 24px;
    font-family: Tahoma, Geneva, sans-serif;
}

As Figure 15-2 shows, the generated content in the note class becomes a block-level element occupying a separate line. In the tip class, it’s converted to an inline block and raised above the baseline. The caution class changes the color, font size, and font of the generated text.

Using the ::after pseudo-element to append generated content works exactly the same way. The styles in image_text_after.html identify the final paragraph using the :last-child pseudo-class. The ::after pseudo-element is appended to the selector to add a couple of images and some text, and style it to be centered on a separate line like this:

p:last-child::after {
    content: url(images/flourish1.png) ' The End ' url(images/flourish2.png);
    display: block;
    text-align: center;
    color: #B20000;
    margin-top: 1em;
}

As Figure 15-3 shows, this adds a stylized “The End” at the foot of the page.

IE 8 doesn’t support the :last-child pseudo-class. For the preceding example to work in IE 8, you not only need to use the single-colon version of :after, but also to assign a class or ID to the last paragraph and use that as the selector, for example p.last:after.

Generating Content from an Attribute

The content property can inspect HTML tags, search for an attribute, and display the text value of the attribute. If the attribute doesn’t exist, the browser simply ignores it. To access the attribute, you insert the attribute name (without quotes) between the parentheses of attr().

This can be useful for displaying an external URL. You can use the attribute selector a[href^="http://"] to style external links differently from internal ones. So it’s just a question of using the ::after pseudo-element with the same selector like this (the code is in attribute.html):

a[href^="http://"]::after {
    content: ' (' attr(href) ') ';
}

The content property uses attr(href) to extract the link’s URL. It’s surrounded on both sides by literal spaces and parentheses in quotes. As Figure 15-4 shows, the pseudo-element appends the URL in parentheses after an external link, but ignores an internal one.

Generating Quotes Automatically

HTML has two elements that are intended to mark up quotations: <q> and <blockquote>. The first one is intended for short, inline quotations, whereas <blockquote> is reserved for lengthy quotations that are intended to be set off from the surrounding text.

You shouldn’t use quotation marks with <q> tags. The browser inserts them for you. For a long time, browsers failed to do so, but all modern browsers (including IE 8) now insert quotation marks correctly. However, IE 8+ uses single curly quotes, Firefox uses double curly quotes, and other browsers use double straight quotes.

The <blockquote> element> doesn’t automatically add quotation marks. You need to add them yourself if you want them.

With the help of the quotes property and the ::before and ::after pseudo-elements, you can control the generation of quotation marks not only for <q>, but also for any other element. What’s more, you can set up sequences to ensure that nested quotations are marked up correctly. For example, you can follow the American typographical practice of double quotes first, followed by single ones for nested quotations. Alternatively, you can use the British convention of single quotes followed by double ones. Or if you’re working with another language, you can use the correct glyphs.

The quotes property expects a space-separated list of pairs of opening and closing quotation marks. If you specify multiple pairs, they’re used in sequence depending on how deep the quotations are nested. The browser automatically keeps track of the level of nesting.

To generate curly quotes or other types of quotation marks, use the hexadecimal codes listed in Table 15-2.

q {
    quotes: '201C' '201D';
}

blockquote p {
    quotes: '201C' '201D' '2018' '2019';
}

blockquote p::before {
    content: open-quote;
}
blockquote p::after {
    content: no-close-quote;
}
blockquote p:last-child::after {
    content: close-quote;
}

Generating Numbered Sequences

It’s not always appropriate to use an ordered list for a numbered sequence. For example, you might want to number the headings and paragraphs in a page that describes a company’s terms of service.

Generating a numbered sequence involves the following steps:

1. Initialize a counter using the counter-reset property.
2. Increment the counter using the counter-increment property.
3. Display the counter using ::before and the content property.

The counter is like a variable in JavaScript. It stores the current number in the sequence. You can call it anything you like, except the keywords none, inherit, or initial. It needs to be initialized in a style rule for an element that precedes or is the parent of the first element that you want to number.

There are two functions that display the counter’s value. Most of the time, you use the counter() function, which keeps track of the value only in its current level of nesting. The similarly named counters() function keeps track of the counter at higher levels of nesting, and resumes the correct sequence when backing out from a lower level.

Using counter() is easier to understand, so I’ll deal with that first.

body {
    background-color: #FFF;
    color: #000;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    counter-reset: chapter 15;
}

h1::before {
    content: 'Chapter ' counter(chapter) ': ';
}

h1 {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: counter(chapter) '.' counter(section) ' ';
}

h2 {
    counter-reset: subsection;
}

h3::before {
    counter-increment: subsection;
    content: counter(chapter) '.' counter(section) '.' counter(subsection) ' ';
}

h2::before {
    counter-increment: section;
    content: counter(chapter) '.' counter(section, lower-roman) ' ';
}
h3::before {
    counter-increment: subsection;
    content: counter(chapter) '.' counter(section, lower-roman) '.' counter(subsection, ←
    lower-alpha) ' ';
}

h2 {
    counter-reset: subsection 7;
}
h2::before {
    counter-increment: section 5;
    content: counter(chapter) '.' counter(section) ' ';
}
h3::before {
    counter-increment: subsection -3;
    content: counter(chapter) '.' counter(section) '.' counter(subsection) ' ';
}

ol {
    list-style-type: none;
    counter-reset: nested;
}
li::before {
    counter-increment: nested;
    content: counters(nested, '.') '. ';
}

Creating a Ribbon Effect

A very simple effect that you can create with triangles and the ::before and ::after pseudo-elements is a ribbon that gives a heading a 3D look.

Creating a Comment Bubble

In the preceding exercise, the ::before and ::after pseudo-elements are used to position triangles at either end of a heading. As you might imagine, the ::after pseudo-element is created last, so it can be superimposed on the ::before pseudo-element. That’s the technique to create the comment bubble in Figure 15-15.

The effect is created by a class called comment, which sets the position property to relative and draws a rounded border around some text, as shown in Figure 15-16.

The styles in comment.html then add the common properties for the ::before and ::after pseudo-elements, and create a left-facing green triangle in the ::before pseudo-element like this:

.comment::before, .comment::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
}
.comment::before {
    border-style: solid;
    border-width: 15px 30px;
    border-color: transparent #060 transparent transparent;
    left: -60px;
    top: 10px;
}

The triangle is created with left and right borders that are twice the width of the top and bottom ones, and by setting the color of all sides except the right to transparent. This produces a more acute angle. The negative left offset is equivalent to the width of the left and right borders, attaching the green triangle to the edge of the border, as shown in Figure 15-17.

Finally, the ::after pseudo-element creates a smaller, white left-facing triangle, and superimposes it on the green triangle like this:

.comment::after {
    border-width: 8px 23px;
    border-style: solid;
    border-color: transparent #FFF transparent transparent;
    left: -46px;
    top: 17px;
}

Again, the triangle is created using a narrower top and bottom border. Getting exactly the right size is mainly a question of trial and error. However, the negative left offset should be equal to the width of the horizontal borders.

Superimposing one triangle on top of the other creates the illusion of a continuous border, as shown earlier in Figure 15-15.

Creating a Thought Bubble

A variation of the same basic technique is used to create the thought bubble in Figure 15-18.

In this example, border-radius on the main text background has been set to 50%, producing an ellipse. Instead of setting the width and height of the pseudo-elements to 0, they’re made into small empty squares that are then converted to circles with border-radius.

The styles for the pseudo-elements in thought_bubble.html look like this:

#thought::before, #thought::after {
    content: '';
    border: #963 solid 10px;
    border-radius: 50%;
    position: absolute;
}
#thought::before {
    height: 10px;
    width: 10px;
    bottom: -40px;
    left: 60px;
}
#thought::after {
    height: 5px;
    width: 5px;
    bottom: -55px;
    left: 20px;
}

Creating a Speech Bubble

A slightly more complex example of this technique creates the speech bubble shown in Figure 15-21. The tail is formed by styling both pseudo-elements as circles and using a negative z-index to tuck them behind the parent element. The ::after pseudo-element also masks part of the ::before pseudo-element.

As in the preceding example, the text background is converted to an ellipse by setting border-radius to 50%. The ::before pseudo element is an empty 70px square of the same background color, converted to a circle using border-radius. It has a bottom offset of -30px, and a z-index of -1 so that it goes behind the ellipse with only the bottom part of the circle protruding, as shown in Figure 15-19.

Use the ::after pseudo-element to position alongside it a slightly smaller circle of a different color, as shown in Figure 15-20.

Finally, change the color of the shape in the ::after pseudo-element to match the page’s background color—and you have a speech bubble, as shown in Figure 15-21.

The styles for the two pseudo-elements in speech_bubble.html look like this:

#quote::before, #quote::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}
#quote::before {
    background-color: #0CF;
    height: 70px;
    width: 70px;
    bottom: -30px;
    left: 60px;
}
#quote::after {
    background-color: #FFF;
    height: 60px;
    width: 60px;
    bottom: -45px;
    left: 45px;
}