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:
Search WWH ::

Custom Search