HTML and CSS Reference
In-Depth Information
Chapter 5
Pseudo selectors
The pseudo-classes and pseudo-elements are keywords that can be appended to
selectors to make them more specific. They are easy to recognize because they are always
preceded by a colon.
Pseudo-elements
The pseudo-elements enable parts of an element to be styled. There are four of them in
CSS, as discussed in the following sections.
first-letter and first-line
The pseudo-elements
:first-letter
and
:first-line
can apply styles to the first letter
and the first line of an element. They work only on block elements such as paragraphs.
p:first-letter { font-size: 120%; }
p:first-line { font-weight: bold; }
The preceding first rule makes the initial letter in a paragraph render 20% larger than
other text. The second rule makes the first line of text in a paragraph bold.
before and after
As their names indicate, the
:before
and
:after
pseudo-elements can target the location
before and after an element. They are used together with the
content
property to insert
content before or after an element.
p:before { content: "Before"; }
p:after { content: "After"; }
These rules make the following paragraph display as “BeforeMiddleAfter”:
<p>Middle</p>
