<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Before and After Pseudo Selectors</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
a {text-decoration: none;}
a:hover {color: red;}
.external:after {content:
url('../../images/EX_newwindow.gif');
margin-left: .2em;}
.warning:before {content: "Warning!"
background-color: yellow;
border-style: dashed;
border-width: 1px;
margin-right: 1em;}
.warning:after {content: "**";
background-color: yellow;
border-style: dashed;
border-width: 1px;
margin-left: 1em;}
blockquote:before {content: open-quote;}
blockquote:after {content: close-quote;}
</style>
</head>
<body>
<a href="#">local link</a><br />
<a href="http://www.htmlref.com" class="external">external link</a><br /><br />
<div class="warning">This is dangerous XHTML example text.
Be careful, you may suffer boredom typing in a bunch of fake
text just to make this example work. Don't worry, almost done.
Finally!</div>
<blockquote>I am a blockquote. To be or not to be a blockquote,
that is the overused
quotation style question.</blockquote>
</body>
</html>