Edit line thickness of CSS 'underline' attribute

Question

Since you can underline any text in CSS like so:

h4 {
  text-decoration: underline;
}

How can you also then edit the 'line' that is drawn, the color you get on the line is easily specified as color: red but how does one edit the height of the line, i.e. the thickness?

score 108 · Accepted Answer · edited Aug 20 '21 at 11:07

108

Here is one way of achieving this :

HTML :

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS :

u {
  text-decoration: none;
  border-bottom: 10px solid black;
}

Here is an example: http://jsfiddle.net/AQ9rL/

edited Aug 20 '21 at 11:07

Alexander van Oostenrijk

4,644
3
23
37

answered Dec 12 '12 at 13:09

Pranav 웃

8,469
6
38
48

93

...or multiple lines of text – cfx Mar 11 '14 at 23:05
In that case you have to wrap the text from each line, before and after the line-break with `` and apply the border-bottom in there. It's a workaround that could be painful in non-hardcoded scenarios though. – Fabián May 24 '19 at 19:02
1

@cfx if you can, you can still do this with `display: inline;` (but it would no longer be block of any kind then, could help somebody though) – jave.web Feb 15 '20 at 14:15
1

This will cause the layout to change. A border will force other elements to move, unlike an underscore which will not. – Joel Karunungan Apr 26 '20 at 05:04

score 58 · Answer 2 · edited Aug 20 '21 at 11:07

58

Recently I had to deal with FF which underlines were too thick and too far from the text in FF, and found a better way to deal with it using a pair of box-shadows:

.custom-underline{
  box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

First shadow is put on top of the second one and that's how you can control the second one by varying the 'px' value of both.

Plus: various colors, thickness and underline position

Minus: can not use on non-solid backgrounds

Here I made couple of examples: http://jsfiddle.net/xsL6rktx/

edited Aug 20 '21 at 11:07

Alexander van Oostenrijk

4,644
3
23
37

answered Feb 24 '15 at 18:27

anvar

709
5
3

4

How neat. A pro (to me atleast) for this one in respect to border-bottom is that the "line" thickness grows towards the text, which makes the gap between text and line less huge. – Victor Häggqvist Jul 14 '15 at 01:36
I get half pixel vertical lines in addition to the underline when doing this. – yeahdixon Mar 17 '17 at 13:12
Seems like it was at one point a perfect answer, but I get very very thin vertical lines on each side of the element in Chrome 66 – little tiny man May 16 '18 at 01:13
1

Instead of **white**, using __transparent__ would work in case of any background. – Jay Dadhania Oct 11 '18 at 03:00
This is best answer. There's no need to alter the HTML and pure CSS solution which won't alter positions like what borders do. – Joel Karunungan Apr 26 '20 at 05:06
please remember box-shadow is cpu intensive – viCky Mar 05 '21 at 07:09

Mihai Rotaru · Answer 3 · 2022-10-21T14:24:34.993

24

There is text-decoration-thickness, currently part of CSS Text Decoration Module Level 4. It's at "Editor's Draft" stage - so it's a work in progress and subject to change. As of October 2022, it has about 93% coverage so it's pretty safe to use.

The text-decoration-thickness CSS property sets the thickness, or width, of the decoration line that is used on text in an element, such as a line-through, underline, or overline.

a {
  text-decoration-thickness: 2px;
}

Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (Firefox only)

There's also text-decoration-color, which is part of CSS Text Decoration Module Level 3. This is more mature (Candidate Recommendation) and is supported in most major browsers (exceptions are Edge and IE). Of course it can't be used to alter the thickness of the line, but can be used to achieve a more "muted" underline (also shown in the codepen).

edited Oct 21 '22 at 14:24

answered Dec 02 '19 at 08:54

Mihai Rotaru

1,953
3
26
28

1

If the user is on Firefox, all the text decoration things can be accessed in [`text-decoration`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration). I don't know if this is planned to be included in all of them, but if so it will be very nice in the future. EDIT: [it is a working draft to support this in `text-decoration`](https://drafts.csswg.org/css-text-decor-4/). – Stormblessed Feb 17 '20 at 20:20
interesting but doesnt really work in a lot of browsers as of now https://css-tricks.com/almanac/properties/t/text-decoration-thickness/#browser-support – viCky Mar 05 '21 at 07:11

score 18 · Answer 4 · edited Jan 08 '17 at 23:40

18

Very easy ... outside "span" element with small font and underline, and inside "font" element with bigger font size.

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

edited Jan 08 '17 at 23:40

Zach Saucier

24,871
12
85
147

answered Apr 07 '15 at 09:25

user4378029

671
7
7

8

If you replace the obsolete `` tag with a `span` tag, this would be the only answer that actually addresses the question. – matteo Jun 25 '16 at 15:37

score 12 · Answer 5 · edited Aug 20 '21 at 11:08

12

Another way to do this is using ":after" (pseudo-element) on the element you want to underline.

h2 {
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;
}

edited Aug 20 '21 at 11:08

Alexander van Oostenrijk

4,644
3
23
37

answered Jan 19 '16 at 20:41

Patrick

182
1
4

similar answer here: https://stackoverflow.com/a/23502743/5091805 – Ari May 30 '21 at 06:10

score 11 · Answer 6 · edited Aug 20 '21 at 11:08

11

I will do something simple like :

.thickness-underline {
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid black;
  margin-bottom: -1px;
}

You can use line-height or padding-bottom to set possition between them
You can use display: inline in some case

Demo : http://jsfiddle.net/5580pqe8/

CSS underline

edited Aug 20 '21 at 11:08

Alexander van Oostenrijk

4,644
3
23
37

answered May 22 '15 at 07:58

l2aelba

21,591
22
102
138

Unfortunately, margin-bottom cannot get negative values. – soleshoe Aug 25 '17 at 17:23
8

@soleshoe That's incorrect, you can have negative margin on the bottom of an element. – Alex Sep 19 '17 at 11:04

H.B. · Answer 7 · 2020-10-13T07:26:19.847

The background-image can also be used to create an underline. This method handles line breaks.

It has to be shifted down via background-position and repeated horizontally. The line width can be adjusted to some degree using background-size (the background is limited to the content box of the element).

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>

You can also animate that as well. Which is nice. – corn on the cob Oct 17 '20 at 16:07 — corn on the cob, Oct 17 '20 at 16:07

viCky · Answer 8 · 2019-10-16T08:08:22.533

7

a {
  text-decoration: none;
  position: relative;
}

a.underline {
  text-decoration: underline;
}

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>

Final Solution: http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

edited Oct 16 '19 at 08:08

answered Oct 31 '16 at 11:46

viCky

854
1
9
21

1

Issue is underline is rendered by different browsers differently. – Joel Karunungan Apr 26 '20 at 05:07

score 7 · Answer 9 · edited Aug 20 '21 at 11:09

7

Thanks to the magic of new css options this is now possible natively:

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

As of yet support is relatively poor. But it'll land in other browsers than ff eventually.

edited Aug 20 '21 at 11:09

Alexander van Oostenrijk

4,644
3
23
37

answered Mar 25 '20 at 10:18

KSPR

2,212
4
29
46

score 4 · Answer 10 · answered Oct 17 '17 at 14:59

My Solution : https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

You can adjust underline position with line-height value, underline thickness and style with border-bottom.

Beware to disable default underline behavior if you want to underline an href.

score 0 · Answer 11 · answered Apr 15 '22 at 10:22

Now, as can be seen in the picture below, the property is fully supported in most browsers (according to Mozilla).

So, you can use the following attributes:

.thin {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 1px;
}

.thick {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: red;
  text-decoration-thickness: 5px;
}

.shorthand {
  text-decoration: underline solid red 5px;
}

(example code from Mozilla).

Edit line thickness of CSS 'underline' attribute

11 Answers11

Linked

Related