CODEWITHSUNDEEP
htmlcssunderline
user1813228
user1813228

Reputation:

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;
}

Upvotes: 1

Views: 10615

Answers (5)

Michael Coker
Michael Coker

Reputation: 53674

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>

Upvotes: 5

Bhuwan
Bhuwan

Reputation: 16855

The best way to do this to use the css pseudo elements ::after. Also you have to set display: inline-block and position: relative to the p element.

Please see the below snippet:

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

.footer p::after {
  content: "";
  width: 60px;
  height: 3px;
  background: black;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -3px;
}
<div class="footer">
  <p>ADDITIONAL INFO</p>
</div>

Upvotes: 0

Dave
Dave

Reputation: 647

you can use the ::after pseudo element. if you dont know what pseudo elemts are i recommend you learn about them here since its a very important part of CSS you will use often. the ::after pseudo element is able to add content after a certain element.

you can create a border after the p element for example:

.footer p::after {content:""; height: 1px; width: 50px; background-color: red;}

Upvotes: 1

Tomasz
Tomasz

Reputation: 210

It should work like you need

footer p
{
  width: 50%;
}

footer p:after {
  content: '';
  border-bottom: 2px #000 solid;
  position: absolute;
  top:40px;
  left: 30px;
  width:100px;
}

https://jsfiddle.net/74zgg81d/1/

Upvotes: 0

This Guy
This Guy

Reputation: 1726

This can be done several ways and more info is needed from you...

Here is one way off the top of my head which is extremely straight forward

<div class="footer">
    <p>Add<u>ition</u>al</p>
</div>

Another alternative would include using the .footer p :before and/or :after psuedo elements...

Upvotes: 0

Related Questions