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 GitHub—post 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 include—just add
*** on a new line.
Most browsers render the
<hr> tag as an inset border—essentially 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
: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.