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

i've liked <hr> tag design divider because it's concise empty tag , can use css design theme. better border-bottom because can set width smaller content above i.e. 25% of container width.

i feel there should empty tag serves anchor point css design.

i know can tag css: <div class=divider></div>

works fine it's not concise <hr>

so me <hr> seems best choice on surface.

then read html5 semantic meaning of <hr> says thematic break. (that seems little arbitrary) title different theme it's content? semantic cases want have featured title post nice box on image title on top , divider , sub-title under it?

i want content make sense syndication , want if it's opened in alternate css liked reader on safari again seems <hr> isn't choice.

should use <span class=divider></span> seems wasteful. have considered <svg> or <br> me <br> seems empty line , possible semantically pause comma in sentence. what's best way have horizontal divider semantically when primary reason design preference , not thematic break?

i think out of suggestions go ahead , use separate custom div <div class="box-divider"></div> it's not wasteful if it's integral part of structure , gives max flexibility in terms of divider , positioning. can same <hr> tag if customize it's css can make want.

a lot of users have commented using psuedo elements on element needs divider 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 simple border line can use border-bottom: 1px solid black; example element , forgo need separate element together. add padding-bottom control positioning.

all in if it's tricky/custom divider need go separate div divider or pseudo elements.