NOTICE: This website is no longer updated or supported - as such many of the techniques used to build it may seem antiquated in the modern day. It is preserved for historical reasons only.

<!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>

CLOSE WINDOW | VIEW RENDERED PAGE