HTML and CSS Reference
In-Depth Information
note
CSS1 and CSS2 defined the first-letter, first-line, before, and after
pseudo-elements with a single colon (
:
). To better distinguish pseudo-
elements from pseudo-classes, the CSS3 spec has changed this to two colons (
::
).
For those four original pseudo-elements, browsers should support both syntaxes.
Other pseudo-elements can be written only with the double colon (
::
).
This pseudo-element selects the first letter of a block or block-like
element (table-cell, table-caption, inline-block, list-item). If block elements
are nested, the first letter of the text will be matched via both elements.
div::first-letter { font-weight: bold; }
p::first-letter { color: blue; }
[...]
<div><p>First paragraph.</p><p>Second paragraph.</p></div>
Given this example, the
F
in the word
First
will be selected by both rules
and be bold and blue, while the
S
in Second will just be blue.
A drop cap effect can be easily achieved by applying a left float and an
increased font size to the first letter of a block.
The first-line pseudo-element selects the first line of a block or block-like
element after the block has been formatted based on its context.
p::first-line { text-transform: uppercase; }
The before and after pseudo-elements are used to select generated
content before or after an element. This content inherits properties from
the element to which it is attached. The following would place the text
NOTE:
before any instance of
p.note
in the document.
