CODEWITHSUNDEEP
htmlcssinheritance
user5442952
user5442952

Reputation:

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

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>

Upvotes: 0

Views: 39

Answers (2)

Lachie
Lachie

Reputation: 1411

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

Adding the following CSS:

.title {
  display: inline-block;
}

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

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.

Upvotes: 1

Related Questions