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.
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
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>
Search WWH ::

Custom Search