11.2.1. Pseudo-Elements
A pseudo-element gets its name because the CSS declaration of this
type causes the browser to act as if it has inserted an artificial
element into an existing element. For example, CSS1 defines
pseudo-elements for the first letter and first line of a block-level
element. The HTML source code for the real element might be something
simple:
<p>A mere paragraph.</p>
But a browser that implements the :first-letter
and :first-line pseudo-elements would treat the
p element as if it were structured as follows:
<p><p:first-line><p:first-letter>A</p:first-letter> mere
paragraph.</p:first-line></p>
The location of the </p:first-line> end tag,
of course, depends on the rendered version of the
p element. If the paragraph were sized to fit a
narrow column, and the first line word-wrapped after the word
"mere," the
:first-line pseudo-element's
invisible end tag would follow the space after
"mere." The point of all of this is
that you can assign numerous style attributes to these very specific
portions of a block-level element, such as a drop capital letter:
p:first-letter {font-size: 36pt; font-weight: 600;
font-family: Rune, serif; float: left}
or an all-uppercase first line:
p:first-line{text-transform:uppercase}
Regardless of the pseudo-element structure or style assignments, the
document tree is unaffected. In the simple p
element example, the element contains one text child node.