Classy ruler

I've seen them pop up at different places. I call them classy rulers, because, well, they look classy to me. It's easy to create them with one or two images, but I'd rather explore a simple CSS solution and I found one. It's been tested and found to work in Firefox 2 and Opera 9. In Internet Explorer 6 you'll end up with a single line. So yes, it degrades, gracefully and classy.

What you see above is the classy ruler. If you don't see it, check out the one below.

Now for the how part. The HTML code is the following:

<div class="ruler"><hr></div>

And the CSS looks like:

.ruler hr {
	background: #333;
	color: #333;
	height: 1px;
	border: 0;
}

.ruler:after {
	content: '\2660';
	color: #333;
	background: #222;
	display: block;
	margin: -1.5em auto 0 auto;
	text-align: center;
	width: 2em;
	height: 1.5em;
}

And that's it.