Trick: get a horizontal line without using

[Kean]

If you don’t want to use <hr> in your markup for whatever reason (for example it isn’t “semantic”) but you still want a horizontal line between two elements, this simple little trick achieves the desired result:

.class-name:after {
    content: " ";
    display: block;
    border-bottom: 1px solid #rrggbb;
  }

The nice thing with this is it has block styling so you can add margins etc if you don’t want the line running all the way to the edge of the box. If you use :after you add this to the block below which you want the line. If it makes sense to attach it to something above which you want a line, change it to :before and border-top.

Simple but effective. Hope this helps someone.

[Paulie_D]

(for example it isn’t “semantic”)

Actually…it’s entirely semantic…it’s exactly what it says it is..a horizontal rule.

In HTML5, the <hr> tag defines a thematic break.

In HTML 4.01, the <hr> tag represents a horizontal rule.

However, the <hr> tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.

[Kean]

That’s why I put “semantic” in quotes :) Different people have different ideas of exactly what that is and isn’t. I wasn’t aware of the change in HTML5 you quoted above but I bet you most people will think of <hr> as a horizontal rule for all time, and that does strike me as being more of a style thing than a semantic thing, but that’s just me.

[nixnerd]

Similarly, if you want a horizontal line above an element, you can do this:

.class-name:before {
    content: " ";
    display: block;
    border-bottom: 1px solid #rrggbb;
  }

These are called pseudo selectors and can be used for all kinds of stuff. Even maintaining aspect ratio where vw or vh isn’t supported.

[__]

I bet you most people will think of <hr> as a horizontal rule for all time

Of course. Note, however, that the semantic definition is only “new” to HTML: in the print world, that’s always been what it’s for.

While it will (and should) always be thought of as a “horizontal rule,” those people who think of it as un-semantic (meaning “meaningless”) were mistaken in the first place.

[Author]

Posts