CSS text-decoration underline, same width as text and underline

Question

I have an <h1> with a text-decoration of underline, I was able to make it the same width as text via display: table-cell like so:

#login h1 {
    color: #FFF;
    border-bottom: 2px solid #15b6e5;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    display: table-cell;
}

Now I am trying to center it, I tried adding a wrapper and add display: table, it centers it but the underline is not same width as the text:

#login .heading-wrapper {
    display: table;
    width: 100%;
}

Here is the HTML

<div class="col-md-12 heading-wrapper">
    <h1>Login</h1>
</div>

What am I doing wrong?

you where almost good, keep table and remove the width:100% and add margin:auto — Temani Afif, Jul 12 '20 at 09:52

score 2 · Accepted Answer · answered Jul 12 '20 at 06:06

The issue is that the h1 is a block level element - so will stretch to fill the parent container. What you are need to do is either - make the h1 not a block level element and center it - or put the text inside a span within the h1 and center that and apply a border bottom to the span.

Note that I am using border bottom on the h1 or the h1 span rather than text decoration. I find it is better and easier to style and space out than text-decoration. But you could swap that and still get hte desired outcome.

.example-1 .heading-wrapper {
  text-align: center;
  }

.example-1 h1 {
    color: #000;
    border-bottom: 2px solid #15b6e5;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-block;
}

.example-2 h1 {
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
}

.example-2 h1  span{
    border-bottom: 2px solid #15b6e5;
}

<span>example 1 - h1 display: inline-block</span>

<div class="example-1">
  <div class="col-md-12 heading-wrapper">
      <h1>Login</h1>
  </div>
</div>


<span>example 2 - span within h1</span>

<div class="example-2">
  <div class="col-md-12 heading-wrapper">
      <h1><span>Login</span></h1>
  </div>
</div>

score 0 · Answer 2 · answered Jul 12 '20 at 05:53

Is this what you are trying to achieve? You can use Flexbox to center things easily. You can read more about flex and how to use it here https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

.center {
  width: 100%;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  background-color: #cfd2d6;
}

.center h1 {
  text-decoration: underline;
}

<div class="center">
  <h1>Login</h1>
</div>

CSS text-decoration underline, same width as text and underline

2 Answers2