I recently found myself devising styles for the "short story" posts on my personal site, which I decided to re-plumb, switching from WordPress to Octopress and GitHubpost about that experience forthcoming!

In any event, short stories tend to be long-winded (as blog posts go), so I wanted to provide authors with an easy way to include emphatic, semantic section breaks. The humble horizontal rule <hr> seemed like the right solution, the more so since Markdown makes them so easy to includejust add *** on a new line.

Most browsers render the <hr> tag as an inset borderessentially a dark line stacked directly on top of a lighter line. But that's about as exciting as one of Ara's two hour lectures on the history and advantages of wind-briefs in rural Alaska.

So, I sleuthed the interwebs for sexier solutions and came across an all-too-familiar site: Chris Coyier's CSS Tricks.

A word of caution: because these styles rely on the :after and :before pseudo-element selectors, IE7 and below don't do a great job rendering them. Thus, you might have to spend some time futzing with IE-specific styles. Or you might choose to do something more valuable with your time.

Tweet