This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with Pseudo-Elements
A pseudo-element is a specific, unique part of an element—such as the first letter or first line of a paragraph—that can be styled independently of the rest of the element. (For a list of other pseudo-elements, see Table 4.5.)
Table 4.5. Pseudo-Elements
|
Format |
Selector Name |
Elements Are Styled If... |
|
|
|
|
|
|
:first-letter, ::first-letter |
the first letter |
first letter in text |
|
|
|
|
|
|
:first-line, ::first-line |
the first line of text |
they are the first line of text |
|
|
|
|
|
|
:after, ::after |
After |
space immediately before element |
|
|
|
|
|
|
:before, ::before |
Before |
space immediately after element |
|
|
|
|
|
Working with first letters and lines
You can access the first letter of any block of text directly using the :first-letter pseudo-element. The first line of any block of text can be isolated for style treatment using the :first-line pseudo-element 
.
)
The general syntax for pseudo-elements. Pseudo-elements can have either a single or double colon, but use a single colon at present for increased browser compatibility.
To highlight the beginning of an article
- Style the default version of the element.
article p {...}Although not required, it’s generally a good idea to set the default style of the selector for which you will be styling the :first-letter pseudo-element (Code 4.11).
Code 4.11. Styles are set for the first letter and first line of the first paragraph in an article 
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alice’s Adventures in Wonderland</title>
<style type="text/css" media="all">
article p {
color: gray;
font-size: 1em;
line-height: 1.5;
margin: .875em 2em;
}
article p:first-of-type::first-letter {
color: red;
font-size: 3em;
float: left;
margin: -.25em .05em 0 0; }
article p:first-of-type::first-line {
color: black;
font-size: 1.25em;
font-weight: bold; }
</style>
</head>
<body>
<article class="chaptertext">
<h2>Chapter I
<span class="chaptertitle">Down the Rabbit-Hole</span>
</h2>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, <q>and what is the use of a book,</q> thought Alice, <q>without pictures or conversations?</q></p>
</article>
</body>
</html>
)
The results of Code 4.11. A common typographic trick to draw the reader’s eye to the beginning of a paragraph is to use a drop cap and to bold the first line of text, as shown here.
- Style the first letter of the element if it is the first of its type. Type the selector you want to style the first letter of (article p), a colon (:), and then first-letter.
article p:first-of-type::first-letter {...}To affect only the first paragraph in an article, you can add the :first-of-type pseudo-class, as in this example.
- Style the first line of the element’s text if it is the first of its type. Type the selector (article p) for which you want to style the first letter, a colon (:), and then first-line.
article p:first-of-type::first-line {...}In this example, the first-of-type pseudo-class is added so that only the first paragraph in an article is styled.
- The element’s first letter and first line of text is styled if it is the first of its type in the parent element. Add the class attribute to the relevant HTML tag.
<p>...</p>
Although you do not have to use a class, you generally will want to selectively style the first letter of elements rather than style them all universally.
Setting content before and after an element
The :before and :after pseudo-elements can be used to generate content that appears above or below a selector. Generally, these pseudo-classes are used with the content property. (See “Adding Content Using CSS” in Chapter 9.) The pseudo-elements let you add and style repetitive content to the page in a consistent way.
To set content before and after an element
- Style the element.
h2 {...}Although not required, it’s generally a good idea to set the default style of the selector for which you will be styling the :before and:after pseudo-elements. (See Code 4.12.)
- Add content before the element. Type the selector (HTML, class, or ID) you want to add content before, a colon (:), and then the keyword before.
h2:before { content:... }Next, declare the content property and define what generated content goes before the element and how it should be styled.
Code 4.12. Before and after pseudo-elements are used to add content—images 
in this case—to the page header 
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alice’s Adventures in Wonderland</title>
<style type="text/css" media="all">
h2 {
font-size: 2em;
color: red; }
h2::before {
content: url('bullet-01.png'); }
h2::after {
content: url('bullet-02.png'); }
</style>
</head>
<body>
<article class="chaptertext">
<h2> Chapter I
<span class="chaptertitle">Down the Rabbit-Hole</span>
</h2>
<p>Alice was beginning to get very tired
→ of sitting by her sister on the bank,
→ and of having nothing to do: once or
→ twice she had peeped into the book
→ her sister was reading, but it had
→ no pictures or conversations in it, <q>
→ and what is the use of a book,</q>
→ thought Alice, <q>without pictures or
→ conversations?</q></p>
</article>
</body>
</html>
bullet-01.png & bullet-02.png will be used as flourishes around titles.
)
The header now has a bit of flourish added before and after by the CSS. These images take up space as if they were in an image tag, but do not show up in the HTML code.
- Add content after the element. Type the selector (HTML, class, or ID) you want to add content after, a colon (:), and then the keyword after.
h2:after { content:... }Next, declare the content property and define what generated content goes after the element and how it should be styled.
The pseudo-element syntax in CSS3 has undergone a slight change from the CSS2 syntax (which is rare). Pseudo-elements now have a double colon to distinguish them from pseudo-classes. Existing pseudo-elements can use either single or double colons. New and future pseudo-elements should use double colons, but will work with a single colon.