CODEWITHSUNDEEP
htmlcss
Johnnybossboy
Johnnybossboy

Reputation: 311

How can I make the line beneath my heading the same width as the text?

How can I make sure the line beneath my header is the same length as the text itself?

This is my HTML:

<h2>Hello world!</h2>

This is my CSS:

h2:after {
  content: " ";
  display: block;
  width: inherit;
  height: 4px;
  background-color: #f77f00;
  color: #f77f00;
}

What I have tried:

CodePen example: https://codepen.io/johnnybossboy/pen/zjGdVr

Upvotes: 0

Views: 164

Answers (2)

dukedevil294
dukedevil294

Reputation: 1305

You can just set it as inline-block and get rid of the pseudo element entirely.

h2{
    display: inline-block;
    border-bottom: 4px solid #f77f00;
}

// Remove pseudo element CSS

Upvotes: 3

Jari Rengeling
Jari Rengeling

Reputation: 326

Use display: inline-block on your h2

h2{
  display: inline-block;
}

Upvotes: 1

Related Questions