HTML and CSS Reference
In-Depth Information
The
::first-line
pseudo-element
puts the onus of calculating what
constitutes the first line of text on
the browser:
p::first-line {
background-color: #000;
}
It applies styles as if there were an
element wrapping all the text on the
first line. But unlike a real element,
you can't style children of the first
line. The pseudo-element can only
come as the last simple selector in a
selector group.
The
::first-letter
pseudo-element
is similar, except that it only selects
the first letter:
p::first-letter {
background-color: #000;
}
Although the background has been
styled in this example because it
stands out in the screenshots, it
would be more common to use a
decorative font for the first letter, or
to increase its size.
Using both
::first-line
and
::first-letter
, it's straightforward to cre-
ate text that looks similar to the examples from the start of this section:
