HTML and CSS Reference
In-Depth Information
Generated content using :before and :after . You can use the :before and
:after pseudo-elements to specify that content should be inserted before
and after the element you are selecting. You then specify what content you
want to insert or generate. As a simple example, you can use the following
rule to insert a decorative image after every link on the page:
a:after {
content: “ “ url(flower.gif);
Yo u c a n a l s of u s e t h e attr() function to insert the values of attributes of the
elements after the element. For example, you could insert the target of every link
in your document in brackets after each one using the following:
a:after {
content: “ ” “(“ attr(href) “)”;
This is a great technique to use in a print stylesheet where you want to just
show the URLs in the document rather than having them hidden inside links
(useless on a printed page).
Note that the new CSS3 way of writing pseudo-elements is to use a double colon—
for example, a::after { ... } , to set them apart from pseudo-classes. CSS3, how-
ever, also still allows for single colon pseudo-elements for the sake of backward
compatibility. This is what I'll be using throughout the topic, although you might
want to use double-colon syntax for better future proofing; it is really up to you.
Search WWH ::

Custom Search