Search code examples
htmlcssunderline

How to center and change the length of underline?

I have text that needs to be underlined only under the middle part of the word.

I have created the fiddle and I want the underline should be centered as shown in this image.

The CSS code which I have included in the fiddle are:

.footer p
{
  width: 50%;
  border-bottom: 1px solid #f51c40;
}
Solution

  • You can use an absolutely positioned pseudo element with left: 50%; transform: translate(-50%); to automatically center it horizontally relative to the content.

    .footer p {
  display: inline-block;
  position: relative;
}

.footer p:after {
  content: "";
  height: 1px;
  width: 50%;
  background-color: red;
  position: absolute;
  bottom: -.5em;
  left: 50%;
  transform: translate(-50%);
}
    <div class="footer">
  <p>ADDITIONAL INFO</p>
</div>