How to set a background color surrounding an <hr> element but not adjacent text

Question

I am trying to add color surrounding an <hr> element but not the surrounding lines, something like this:

A horizontal line HTML element between two words, the horizontal line has been highlighted yellow in a separate notes app

I tried a div with a background-color set like so:

test
<div style="background-color: yellow;">
  <hr>
</div>
test

But it does not work.

Trying this instead:

<div style="background-color: yellow;">
  <hr>
  test
</div>

I noticed that the <hr>’s background can only really be styled by the surrounding text.

Is there a good way around this?

Answer 1

The default <hr> element is a single inset border, without height, so it can't display background. You can use box-shadow instead:

.divider {
  box-shadow: 0 0 0 0.5rem yellow;
}

test
<hr class="divider">
test

Answer 2

You can use padding on the div element to make the div expand some so that the background is visible. In your current example, the div is the same dimensions as the hr, so the hr occludes the background. And also an hr has no height.

test
<div style="background-color: yellow; padding: 0.25em 0.5em;">
  <hr>
</div>
test