Inheriting the width of a text element to a line break HTML

Question

I'm trying to inherit the width of my H3 into my line break. How would I go about doing this?

<div class="title">
        <h3>Lorem ipsum dolor sit amet.</h3>
        <hr />
</div>

Answer 1

The easiest way would be to simply not use an <hr> tag, and instead opt for a simple underline with text-decoration: underline:

h3 {
  text-decoration: underline;
}

<div class="title">
  <h3>Lorem ipsum dolor sit amet.</h3>
</div>

Alternatively you could use border-bottom, which would allow you to increase the gap with padding-bottom:

h3 {
  display: inline-block;
  border-bottom: 1px solid black;
  padding-bottom: 10px;
}

<div class="title">
  <h3>Lorem ipsum dolor sit amet.</h3>
</div>

Note that with the second solution, you'll want to give the <h3> tag display: inline-block so that it doesn't occupy the full line.

Answer 2

The solution to this is to set your <div> to have the property display: inline-block.

Adding the following CSS:

.title {
  display: inline-block;
}