How to change width of underline in css

Question

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?

You can use border-bottom property to set width and color of the underline — Ron537, Mar 29 '17 at 05:40

score 10 · Accepted Answer · answered Mar 29 '17 at 05:40

10

use border-bottom define color cording like this

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

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

answered Mar 29 '17 at 05:40

lalit bhakuni

607
5
15

score 5 · Answer 2 · answered Mar 29 '17 at 05:41

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>

Dan Philip Bejoy · Answer 3 · 2017-03-29T05:48:38.943

4

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>

edited Mar 29 '17 at 05:48

answered Mar 29 '17 at 05:43

Dan Philip Bejoy

4,321
1
18
33

It doesn't underline the entire text – MotKohn Mar 29 '17 at 05:45
The requirement was to control the width of the undeline. Just give the width to 100% it'll underline the entire text. – Dan Philip Bejoy Mar 29 '17 at 05:47
Oh, I thought OP meant thickness. You may be right. – MotKohn Mar 29 '17 at 05:48

score 4 · Answer 4 · answered Jan 02 '22 at 19:09

4

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.

answered Jan 02 '22 at 19:09

Geeky

81
2

supported in all but FF on Android and IE https://caniuse.com/?search=text-decoration-thickness – Fanky Apr 07 '22 at 20:36

score 3 · Answer 5 · answered Jan 05 '23 at 10:13

3

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;

answered Jan 05 '23 at 10:13

Fancy Boy Epic

71
3

score 2 · Answer 6 · answered Mar 29 '17 at 05:42

2

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

answered Mar 29 '17 at 05:42

NARGIS PARWEEN

1,489
3
16
26

score 2 · Answer 7 · edited May 23 '17 at 12:34

2

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>

edited May 23 '17 at 12:34

Community

1
1

answered Mar 29 '17 at 05:43

Carl Binalla

5,393
5
27
46

How can I specify the width for underline?Thank you for the answer – Jibin Mar 29 '17 at 05:46
@Jibin Not really sure how – Carl Binalla Mar 29 '17 at 05:52
Thank you for your support @ Carl Jan – Jibin Mar 29 '17 at 05:56

score 1 · Answer 8 · answered Dec 16 '19 at 21:55

1

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

answered Dec 16 '19 at 21:55

Reece

777
5
22
42

Very nice solution. Thank you @Reece. – Radu Bartan Oct 14 '21 at 12:22

score 0 · Answer 9 · answered Jul 03 '18 at 14:58

0

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.

answered Jul 03 '18 at 14:58

Edward Bella

127
10

How to change width of underline in css

9 Answers9

To set the thickness of the underline

To set the color of the underline

To offset the underline

Linked