Did you know you can style an <hr> HTML element quite a bit?

If you look at the specification, it tells us that it’s an empty-content element, and it belongs to the flow-content elements. We also can see that it’s not usable with an opening and closing element so it’s used as a solitaire without end-tag.

So, now we only need to know when to use an hr element:

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book. — Spec

With that information in mind you’d likely think that this element isn’t much stylable and except for the border color most uf us probably never did. Here’s what you can style:

View the Codepen

By using the opportunity that the element supports ::before, ::after pseudo-elements, we can reformat the element to not be a single line but actually to contain CSS-content. Even better, it seems to support the full block-type styling properties so the only limit we have is that we can’t set inner HTML text and elements.