CODEWITHSUNDEEP
htmlcss
Jibin
Jibin

Reputation: 464

How to change width of underline in css

I have a cell in a table like this:

<td><b>Grand Total</b></td>

I need to give it a line under the text "Grand Total". I used text-decoration: underline;. It worked well, but I need to change the color and thickness of the underline. I used text-decoration-color: red; to add color but it doesn't work. How can I solve this problem?

Upvotes: 9

Views: 71614

Answers (9)

Fancy Boy Epic
Fancy Boy Epic

Reputation: 91

Usually I use these three CSS properties to style the underline

To set the thickness of the underline

text-decoration-thickness: 3px;

To set the color of the underline

text-decoration-color: red;

To offset the underline

text-underline-offset: 5px;

Upvotes: 4

Geeky
Geeky

Reputation: 141

The best approach is to use the text-decoration-thickness css property. Here is the link to the documentation. A simple code sample would look something like:

text-decoration: underline solid black 2px;

The 2px here is the text-decoration-thickness or rather the width of the underline.

Upvotes: 10

Reece
Reece

Reputation: 797

If you target your 'b', you can use a background gradient which will allow you to adjust the thickness of the line and the line's vertical placement.

eg.

b {
    background-image: linear-gradient(to bottom, #fdb514 50%, transparent 50%);
    background-position: 0px 0.9em;
    background-repeat: repeat-x;
    background-size: 1px 15px;
    display: inline;
}

Upvotes: 2

Edward Bella
Edward Bella

Reputation: 127

td {
position: relative;
}

td::after {
content: '';
position: absolute;
width: 30%;
display: block;
height: 5px;
background-color: red;
bottom: -5px;
}

To control the width, you just change the width from 100% to whatever value you wish.

Upvotes: 0

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

Use pseudo elements like :before and :after to control the length of the underline as well

td {
  position: relative;
}

td:after {
  content: '';
  position: absolute;
  width: 100%;
  display: block;
  height: 5px;
  background-color: red;
  bottom: -5px;
}
<table>
  <tbody>
    <tr>
      <td><b>Grand Total</b></td>
    </tr>
  </tbody>
</table>

Upvotes: 4

Carl Binalla
Carl Binalla

Reputation: 5401

From here

td {
  color: red;
  text-decoration: underline;
}

span {
  color: black;
  text-decoration: none;
}
<table>
  <tr>
    <td><b><span>Grand Total</span></b></td>
  </tr>
</table>

Upvotes: 2

NARGIS PARWEEN
NARGIS PARWEEN

Reputation: 1596

You should give class or id to your specific line, like:

HTML:

<td><b id="total">Grand Total</b></td>

CSS: 

#total {
  border-bottom: 1px solid red;
  padding: 0 0 4px;
}

Upvotes: 2

Deepak Yadav
Deepak Yadav

Reputation: 7079

You cannot modify the width of underline tag. Instead go for Border-bottom approach and change it's properties as required.

.underline {
  border-bottom: 5px solid red;
}
<table>
  <tr>
    <td><b class="underline">Grand Total</b></td>
  </tr>
</table>

Upvotes: 5

lalit bhakuni
lalit bhakuni

Reputation: 627

use border-bottom define color cording like this 

b {
    border-bottom: 1px solid red;
    padding: 0 0 4px;
}
<td><b>Grand Total</b></td>

Upvotes: 11

Related Questions