Styling the hr tag
Styling a horizontal rule with CSS is a true nightmare, due to the behavioural issues among the available browsers. This is the main reason why the hr tag is marginalised. When was the last time you saw a hr in a website source code? Can you remember? The hr tag is informally deprecated, since web designers tend to use the div tag instead. Some common usages are <div class="separator"> and <div class="hr">.
The problem behind the styling of horizontal rules is perfectly analysed by Marek Prokop. I will not mention or analyse the problems again, since it is out of the scope of this post — what follows is an alternative method of styling horizontal rules.
I do like horizontal rules. They are essential for styling and separating the content in cases that CSS are not available. When I was designing iacons.net, I attempted to use the hr tag pure, without any extra wrappers such as <div class="hr">. Eventually, I came up with a solution: a combination of :after pseudo-class and UTF-8 symbols. Unfortunately, this method can not be used for IE6 and I am not sure about IE7…
I have prepared some examples of formatted horizontal rules. View the source for extra information on how to achieve it.
Popularity: 7%
- Previous post: A story of interaction design
- Next post:Flickr Explore! My first submission
I tried your example in IE7 and it doesn’t seem to work. It behaves pretty much like you’d expect IE6 to. Don’t you just love it? — I usually use HRs as single pixel lines and revert to DIVs for more complex separators. Not the most elegant solution but it works.
PS: Thanks for linking to UX Magazine.
It doesn’t work with IE6 either. I’d probably be using divs and background images for separators and as substitute for hrs. If IE supports pseudo classes then it’s better. Too bad I have to dream on and wait for the new and better IE.
Thank you for your feedback. I didn’t except that it would work either on IE6 or IE7. After all, IE6 doesn’t support
:beforeand:afterpseudo classes. On the other hand IE7 inherited the non-standard behaviour of his ancestor IE6. So I suppose that we have to dream, wait and mainly pray for a better Internet Explorer (version 8?) …It’s good to share these CSS techniques. Unfortunately as you stated, this does not work on all browsers (eg IE). I really love your CSS examples though with the pseudo classes!