Faux <hr>

Need the retro vibe of the <hr>, but don’t need its semantic connotations?

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

— https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

Use a faux hr!

An actual <hr>:

A faux <hr>:

<style>
span.hr{
  display: block;
  margin-block: 0.5em 0;
  border: 1px inset;
}
</style>

<span class="hr"></span>

Or, using a pseudo element to place the faux <hr> after another element:

<style>
  div.hr::after{
    content: '';
    margin: 1em 0;
    border: 1px inset;
    display: block;
  }
</style>

<div class="hr">
  A div with a faux-hr.
</div>