HTML and CSS Reference
In-Depth Information
This would style the first line of some classic prose with an initial drop cap and varied first
line, as shown in the following illustration.
O
NLINE
http://htmlref.com/ch4/firstletterandline.html
N
OTE
Under CSS3, the syntax of pseudo-elements has been changed to have two colons, so
:first-line
becomes
::first-line
. This change makes the difference between a
pseudo-element and a pseudo-class explicit, but since this syntax is not as widely supported
yet, the examples will focus on the traditional CSS2 syntax, which will likely continue to be
supported for quite some time.
:before and :after Pseudo-Elements
A very useful pair of pseudo-elements are the
:before
and
:after
selectors, which under
CSS3 are written as
::before
and
::after
. These selectors are used to add generated
content before or after an element and nearly always are combined with the CSS2 property
content
, which is used to insert dynamically generated content. As an example, we might
use these selectors to insert special start- and end-of-section indicator images. Consider the
following:
div.section:before {content: url(sectionstart.gif);}
div.section:after {content: url(sectionend.gif);}
The
content
property can be used to specify objects like images, as indicated by the
preceding example, but it also can specify regular text content; for example,
p.warn:before {content: "Warning!";}
will print the word “Warning!” before every paragraph in class “warn.” The following
example uses
:before
and
:after
pseudo-elements, a rendering of which appears in
Figure 4-10:
<!DOCTYPE html>
<html>
<head>
