HTML and CSS Reference
In-Depth Information
PSEUDO-ELEMENTS
Pseudo-elements differ from pseudo-classes in that they don't select states of
elements; they select parts of an element:
FIGURE 1.4
first-letter
and
:first-line
in effect!
first-letter
and
first-line
.
You can select the first letter inside a given
element using the
first-letter
pseudo-element and the first line using
first-line
.
In my King Arthur blog example (introduced in Chapter 2 and
found in the king-arthur-blog-example code download folder), I've cre-
ated a rather cool drop cap and first-line effect using both of these pseudo-
elements in tandem (see
Figure 1.4
for the result):
#main>article>p:first-of-type:first-line {
font-variant: small-caps;
}
#main>article>p:first-of-type:first-letter {
font-size: 400%;
float: left;
/* loads more styling! */
}
