HTML and CSS Reference
In-Depth Information
Generating Content with CSS
You can generate page content using the following before and after pseudo-elements
along with the content property
selector :before {content: text ;}
selector :after {content: text ;}
where text is the text you want to add to the element. For example, the style rule
em:after {content: “ !”;}
appends a space and an exclamation point to the end of every em element. You also can
use the before and after pseudo-elements in conjunction with pseudo-classes. The
style rules
a:hover:before {content: “<”;}
a:hover:after {content: “>”;}
create a rollover effect in which the < and > characters are placed around a hypertext
link when a mouse pointer hovers over the link.
Another way to insert content using CSS is to retrieve information from an element
attribute using the attr property, which has the syntax
content: attr( attribute )
where attribute is an attribute of the element. For example, the following style
appends every hypertext link with the text of the link's URL as stored in the href
a:after {
content: attr(“ [“ attr(href) “] “);
When applied to the hypertext link
<a href=”home.htm”>Sunny Acres</a>
this style will be rendered by the browser as follows:
Sunny Acres [home.htm]
Finally, you can insert an image by specifying the URL of the image file for the value
of the content property, as the following code demonstrates:
a[href^=”http”]:after {
content: url(uparrow.png);
In this example, the uparrow.png file is appended to any hypertext link that contains
the text string http within its href attribute. This technique is sometimes used to visually
identify hypertext links that point to external Web sites.
By generating content through your CSS style sheets, you can create interesting
dynamic effects for your Web site that are easy to develop and maintain. Note, however,
that the content pseudo-class is not supported in older browsers, and so you should not
rely on it to create text critical to the understanding of your Web site.
Search WWH ::

Custom Search