HTML and CSS Reference
In-Depth Information
p:first-letter {font-size: 200%; float: left}
tells the browser to make the first letter of a paragraph twice as large
as the remaining text and to float the letter to the left, allowing the first
two lines of the paragraph to float around the larger initial letter (see
Figure 8-2
).
[*]
[*]
The properties you can specify for the
:first-letter
and
:first-line
pseudoelements are
font, color, background, text-decoration, vertical-align, text-transform,
line-height
, and
clear
. And in addition, the
:first-letter
pseudoelement accepts the margin
properties, padding properties, border properties, and
float
. The
:first-line
pseudoelement also
accepts the
word-spacing
and
letter-spacing
properties.
Figure 8-2. Use the first-letter pseudoelement to select
the first letter of text within a tag's content
The
:before
and
:after
pseudoelements let you identify where in your
document you insert generated content such as list numbers and special
lead-in headers. Hence, these pseudoelements go hand in hand with the
CSS2
content
and
counter
properties. To whet your appetite, consider
this example:
ul {counter-reset: item; list-style: none}
ul li:before {content: "Item #" counters(item, ".") " ";
