HTML and CSS Reference
In-Depth Information
::first-letter
::first-line
All border properties
text-decoration
text-decoration
vertical-align
vertical-align
(if
float
is set to
none
)
text-transform
text-transform
line-height
line-height
clear
(CSS2 only; removed in CSS2.1)
float
letter-spacing
(added in CSS2.1)
word-spacing
(added in CSS2.1)
clear
(CSS2 only; removed in CSS2.1)
Styling (Or Creating) Content Before and After Elements
Let's say you want to preface every
h2
element with a pair of silver square brackets as
a typographical effect:
h2::before {content: "]]"; color: silver;}
CSS2.1 lets you insert
generated content
, and then style it directly using the pseudo-
elements
::before
and
::after
.
Figure 1-46
illustrates an example.
Figure 1-46. Inserting content before an element
The pseudo-element is used to insert the generated content and to style it. To place
content after an element, use the pseudo-element
::after
. You could end your docu-
ments with an appropriate finish:
body::after {content: "The End.";}
Generated content is a separate subject, and the entire topic (including more detail
on
::before
and
::after
) is covered more thoroughly in just a bit.
Summary
By using selectors based on the document's language, authors can create CSS rules that
apply to a large number of similar elements just as easily as they can construct rules
that apply in very narrow circumstances. The ability to group together both selectors
and rules keeps style sheets compact and flexible, which incidentally leads to smaller
file sizes and faster download times.
Selectors are the one thing that user agents usually must get right because the inability
to correctly interpret selectors pretty much prevents a user agent from using CSS at all.
