Back to CSS Tips
Preview: what the working site looks like.

Special Characters

A longer list here Online HTML to Escaped Character converter
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>   
    <div id="container">
        <h1>Special Characters</h1>
            <ul>
                <li class="line"><span class="left numbers">&#10003;</span><span class="left">Check mark</span> <span class="right">&amp;#10003;</span></li>
                <li class="line"><span class="left numbers">&copy;</span><span class="left">Copyright</span> <span class="right">&amp;copy;</span></li>
                <li class="line"><span class="left numbers">&#153;</span><span class="left">Trademark</span> <span class="right">&amp;#153;</span></li>
                <li class="line"><span class="left numbers">&reg;</span><span class="left">Registered</span> <span class="right">&amp;reg;</span></li>
                <li class="line"><span class="left numbers">&#64;</span><span class="left">Ampersand</span> <span class="right">&amp;#64;</span></li>
                <li class="line"><span class="left numbers">&laquo;</span><span class="left">Left angled quote</span> <span class="right">&amp;laquo;</span></li>
                <li class="line"><span class="left numbers">&raquo;</span><span class="left">Right angled quote</span> <span class="right">&amp;raquo;</span></li>
                <li class="line"><span class="left numbers">&euml;</span><span class="left">No&euml;l's &euml;</span> <span class="right">&amp;euml;</span></li>
            </ul>
            <aside>
            	<h2>Inserting characters with CSS</h2>
                    <p>The British Pound looks like this - <span class="GBP">170.00</span></p>
                    <p>The US Dollar looks like this - <span class="US">127.00</span></p>
                    <p>The Costa Rican Colone looks like this - <span class="CR">589.00</span></p>
            </aside>
    <!--container--></div>  
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 500px; 
	margin: 50px auto;
	padding: 10px 20px 20px 0; 
	border: 4px double #999; 
	background: #faf7e1;
	text-align: left;
	overflow: auto;
}
ul {list-style-type: none;}
	.line {
		height: 16px;
		clear: both;
		background: url(dot.gif) repeat-x 0 13px;
	}
	.left {
		padding: 0 5px 0 10px;
		float: left; 
		background: #faf7e1;
	}
	.right {
		padding: 0 0 0 5px;
		float: right; 
		background: #faf7e1;
	}
	.numbers {
		height: 16px;
		width: 30px; 
		text-align: right;
	}
aside {
	margin: 20px 0;
	padding: 20px;
	font-size: 0.8em;
}
	aside p {margin: 5px 0 0 10px;}
		.GBP:before{content: "£"}
		.US:before {content: "$"}
		.CR:before {content: "₡"}
h1 {text-align: center}
h2 {font-size: 1em;}
	a.linky {
		width: 350px;
		float: right;
		clear: right;
	}
	a.linky:hover, 
	a.linky:active {color: #f00;}
		
The jQuery/JavaScript