Using the :before and :after Selectors
Description
The :before and :after selectors generate content and add it to the document.
- :before
Inserts content before the content of the selected elements.
CSS Version 2 - :after
Inserts content after the content of the selected elements.
CSS Version 2
When using these selectors, you specify the content you want to insert by setting a value for the content property.
Example
The following code uses the :before and :after Selectors.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a:before {<!-- w w w . j av a 2s . c o m-->
content: "Click here to "
}
a:after {
content: "!"
}
</style>
</head>
<body>
<a href="http://java2s.com">Visit the website</a>
<p>
I like <span>CSS</span> and HTML.
</p>
<a href="http://w3c.org">Visit the W3C website</a>
</body>
</html>