How should I make a divider that doesn't necessarily represent a thematic break <hr> vs <span>,<div>,css etc

I've always liked the <hr> tag as a design divider because it's a concise empty tag and you can use CSS to design it with a theme. I like it better than border-bottom because you can set the width to be smaller than the content above it i.e. 25% of the container width.

I almost feel like there should be an empty tag that serves as an anchor point for css design.

I know I can do this with any tag with CSS: <div class=divider></div>

works just fine but it's not as concise as <hr>

So to me <hr> seems like the best choice on the surface.

Then I read the HTML5 semantic meaning of <hr> which says it is a thematic break. (That seems a little arbitrary) is a title a different theme than it's content? What about semantic cases where I want to have a featured title for a post with a nice box over an image with the title on top and a divider and the sub-title under it?

I want my content to make sense for syndication and I want it to look good if it's opened in an alternate css liked reader on safari which again seems to say <hr> isn't a good choice.

Should I use <span class=divider></span> that seems wasteful. I have also considered <svg> or <br> but to me <br> seems like an empty line and possible also semantically like a pause like a comma in a sentence. What's the best way to have a horizontal divider semantically when the primary reason is design preference and not a thematic break?

Solution

I think out of your suggestions I would just go ahead and use the separate custom div <div class="box-divider"></div> it's really not that wasteful if it's an integral part of your structure and gives you the max flexibility in terms of what your divider will look like and positioning. You can honestly do the same to an <hr> tag if you customize it's css you can make it look however you want.

A lot of users have commented about using psuedo elements on the element that needs a divider which is a fine suggestion.

.box {
    position: relative;
}

.box:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: green;
}

If it's as simple as a border line you can just use border-bottom: 1px solid black; for example to the element itself and forgo the need for a separate element all together. Add some padding-bottom to control the positioning.

All in all if it's a tricky/custom divider that you need I would just go for the separate div divider or pseudo elements.