How to increase the gap between text and underlining in CSS

Question

Using CSS, when text has text-decoration:underline applied, is it possible to increase the distance between the text and the underline?

This is not exactly what you were asking for, but it was an interesting read on the subject: [CSS Design: Custom Underlines](http://www.alistapart.com/articles/customunderlines/) — Peter Rowell, Nov 14 '09 at 15:53
The distance is determined by a font used. Try web-safe fonts. — Alexei Danchenkov, Sep 12 '14 at 04:22
CSS3 has a lot of new text-decoration properties these days. Please check out alligator.io/css/text-decoration Example: `text-underline-position: under;` and `text-decoration-skip: ink;` Please note that this is probably not backward compatible with older browsers. — chocolata, Oct 24 '17 at 14:08
Another [good solution](https://stackoverflow.com/a/8037837/3452348) — w3spi, Jul 14 '18 at 12:35
Vote for `text-underline-offset` here: https://bugs.chromium.org/p/chromium/issues/detail?id=785230&q=text-underline-offset&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified — Mark Fisher, Dec 03 '19 at 14:04

score 473 · Accepted Answer · edited Dec 16 '16 at 11:01

473

No, but you could go with something like border-bottom: 1px solid #000 and padding-bottom: 3px.

If you want the same color of the "underline" (which in my example is a border), you just leave out the color declaration, i.e. border-bottom-width: 1px and border-bottom-style: solid.

For multiline, you can wrap you multiline texts in a span inside the element. E.g. <a href="#"><span>insert multiline texts here</span></a> then just add border-bottom and padding on the <span> - Demo

edited Dec 16 '16 at 11:01

fishbone

3,140
2
37
50

answered Nov 14 '09 at 15:50

chelmertz

20,399
5
40
46

3

My only problem with this trick is when I am using line-height equal to the div height and then vertical-align: middle; to get it centered, then i can't use this trick because then the underline ends up below the div. – deweydb Nov 16 '12 at 23:55
@deweydb: How about adding the padding-bottom to the container div as well? http://jsfiddle.net/dYfjc/1/ – chelmertz Nov 17 '12 at 15:32
+1 I didn't know about leaving off the color property to inherit the font's color - that'll save much sweat and tears in future! – Larry Jul 08 '13 at 12:52
5 years later this is still useful! +1 for a sweet workaround – PsychoMantis Jan 25 '14 at 22:39
border-bottom sometimes expands beyond the width of the text. you can add display: inline-block to your anchor element to fix this. – Leandri Jul 18 '14 at 14:23
26

I am pretty not sure why this answer has so many upvotes. This doesn't completely work with multiline texts. – Jul 17 '15 at 15:46
It also works badly if you already have a padding in the tag and has no freedom to modify it. – Anders Lindén Dec 02 '15 at 15:26
what if text is multiline? – Gaurav Aggarwal May 04 '16 at 10:27
The text-shadow is not applied to the border, which is an issue for me. – Etienne Dupuis May 18 '16 at 17:29
3

For multiline, you can wrap you multiline texts in a span inside the element. E.g. `insert multiline texts here` then just add border-bottom and padding on the ``. https://jsfiddle.net/Aishaterr/vrpb2ey7/1/ – Daniel Hernandez Nov 08 '16 at 11:42
@Aishaterr very nice, I think your code is much prettier than the others. If you wish, you could edit this answer to include your exact comment (the jsfiddle helps a lot when conveying people :)) – chelmertz Nov 08 '16 at 14:16
To look more like under line, we can add padding-left:2px and padding-right:2px So that line get extra width under the text. Thanks to the author for solution. – zawhtut Dec 16 '21 at 03:50

score 356 · Answer 2 · edited Mar 22 '21 at 00:04

356

Update 2021: text-underline-offset now works in almost all major and newest versions of browsers (IE11 is a no-go): https://caniuse.com/?search=text-underline-offset

Update 2019: The CSS Working Group has published a draft for text decoration level 4 which would add a new property text-underline-offset (as well as text-decoration-thickness) to allow control over the exact placement of an underline. As of this writing, it's an early-stage draft and has not been implemented by any browser, but it looks like it will eventually make the technique below obsolete.

Original answer below.

The problem with using border-bottom directly is that even with padding-bottom: 0, the underline tends to be too far away from the text to look good. So we still don't have complete control.

One solution that gives you pixel accuracy is to use the :after pseudo element:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

By changing the bottom property (negative numbers are fine) you can position the underline exactly where you want it.

One problem with this technique to beware is that it behaves a bit weird with line wraps.

edited Mar 22 '21 at 00:04

disinfor

10,865
2
33
44

answered Sep 05 '12 at 13:03

last-child

4,481
1
21
19

2

This won't work for my particular issue, but this is a fantastic trick. +1 – Jan 15 '13 at 18:32
13

Good work around, but this will not work for anchors that span multiple lines – Willster May 13 '13 at 15:53
@last-child This one is better than underline, but with text wrap this would not work for every line – Nishantha Apr 18 '15 at 04:20
One problem is that a border-bottom and underlining are two different things. For instance should part of the text extend below the underline. If you style a-tags as buttons, you have no freedom of using border-bottom as underlining. – Anders Lindén Dec 02 '15 at 15:28
Add z-index:-1 for bring border under the text – Fred K Mar 26 '16 at 20:00
33

Imagine telling someone who is either new to web development, a graphic designer, an average user, or your mom, that this is what's required to add some controlled space between text and it's underline and they will wonder what you're doing with your life. – MarcGuay May 26 '16 at 21:45
I was able to control the distance of the border by using `line-height`. It was on a `
` so I used `inline-block` as well
– Eoin Dec 08 '18 at 00:44
3

Thanks for the update. As of August 2020, `text-underline-offset` works beautifully in Safari and Firefox. (Chrome didn't get the memo apparently.) – Kal Aug 06 '20 at 02:16
10

`text-underline-offset` has been recently added to Chrome and Edge. What a time to be alive! – MrSegFaulty Jan 29 '21 at 12:31

score 129 · Answer 3 · edited Aug 24 '18 at 07:39

129

You can use this text-underline-position: under

See here for more detail: https://css-tricks.com/almanac/properties/t/text-underline-position/

See also browser compatibility.

edited Aug 24 '18 at 07:39

Álvaro González

142,137
41
261
360

answered Apr 19 '17 at 07:52

Duc Huynh

1,467
1
9
12

2

Thanks! If you are trying to do a dashed underline and see that it is drawn without space between the bottom of the text and the line, then this fixes the issue. – Jonathan Cross May 12 '17 at 18:36
7

This is the correct answer for modern browsers without any workaround. – Paras Shah Sep 28 '17 at 13:36
2

It does not work in Firefox, not even with vendor-prefix - but it IS in a W3C spec: https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property. Other relevant resource: https://www.quackit.com/css/css3/properties/css_text-underline-position.cfm – rosell.dk Feb 23 '18 at 07:43
Great find! I look at this as that we should use it now until the other browsers catch up on the spec. For those who don't have it, they'll just get a less than desirable appearance, but not too terribly bad. – Volomike Feb 23 '18 at 21:45
This is the real answer. Using `borders` will only work on one-lines, you will see the problem with multilines. – JohnnyQ Mar 05 '18 at 03:44
4

As of this moment, this only really works in the chrome browser, and is not a solution for other browsers. – miir Mar 08 '18 at 00:13
Unfortunately only Chrome supports this https://caniuse.com/#search=text-underline-position – Oleg Dec 10 '19 at 13:42
5

Well, as of the date of this comment, I see this **works in Firefox** too. – Jarad May 01 '20 at 02:50
Chrome is having issues rendering this in some instances *for me*. Looks like it's generally poorly tested. Yes it works initially, but with additional hover styling, the underline will sometimes get cut in half or disappear completely, seemingly undeterministically. – Filip Kilibarda Oct 12 '20 at 22:48
1

Perfect, Other answers are far too cumbersome.This should be marked as correct answer. – user3286381 May 03 '21 at 22:30

score 59 · Answer 4 · edited Jan 20 '22 at 02:20

59

Use

{
   text-decoration: underline;
   text-underline-offset: 2px;
}

Here, text-underline-offset: 2px;  is used to define the distance of the underline from the text, where "2px" is the distance.

Note: text-underline-offset: 2px;  can only be used after 
                  text-decoration: underline;

You can also change the thickness of underline by writing
                   text-decoration: underline 5px;
where "5px" is the thickness.

Refer this link for further query: https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

edited Jan 20 '22 at 02:20

Aditya Singh

101
6

answered Aug 27 '20 at 00:23

BALAJI PILLAI

747
6
5

4

Welcome to Stack Overflow. Code-only answers are discouraged on Stack Overflow because they don't explain how it solves the problem. Please edit your answer to explain what this code does and how it improves on the many other upvoted answers this question has already, so that it is useful to other users with similar issues – FluffyKitten Aug 27 '20 at 02:14
3

There's no chrome support for this. https://caniuse.com/?search=text-underline-offset – john-raymon Oct 15 '20 at 10:12
errrr yes - as explanation .... `text-underline-offset: 2px` sets the text underline to an offset of 2px... in case someone doesn't understand. Chrome supports as well now. – Toskan Jan 13 '21 at 03:31
This should be the accepted answer because it works well even in 2022. It is currently supported by Chrome, Edge, Opera. – AnatuGreen Jun 05 '22 at 09:03

score 33 · Answer 5 · edited Jan 29 '19 at 09:41

33

Here is what works well for me.

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>

edited Jan 29 '19 at 09:41

Patryk Uszyński

1,069
1
12
20

answered Dec 13 '18 at 06:56

ubuntuuber

740
1
7
18

2

It is important to note that `text-underline-position` is not supported under Firefox as per https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position#Browser_compatibility – Floran Gmehlin Jun 05 '19 at 10:04
Very interesting. Great callout. Thank you! – ubuntuuber Jun 15 '19 at 17:24
1

Supported in Firefox starting from 74, as per the same link. – GSerg May 11 '20 at 16:54

score 12 · Answer 6 · edited Apr 04 '19 at 10:24

Getting into the details of the visual style of text-decoration:underline is pretty much futile, so you're going to have to go with some kind of hack the removes text-decoration:underline and replaces it with something else until a magical far-distant future version of CSS gives us more control.

This worked for me:

   a {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) 81%, 
        #222222 81.1%,
        #222222 85%,
        rgba(0,0,0,0) 85.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>

Adjust the % values (81% and 85%) to change how far the line is from the text
Adjust the difference between the two % values to change the line thickness
adjust the color values (#222222) to change the underline color
works with multiple line inline elements
works with any background

Here's a version with all the proprietary properties for some backwards compatibility:

a {     
    /* This code generated from: http://colorzilla.com/gradient-editor/ */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */

    text-decoration: none;
}

Update: SASSY version

I made a scss mixin for this. If you don't use SASS, the regular version above still works great...

@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) $top,
        $color $top + 0.1%,
        $color $bottom,
        rgba(0,0,0,0) $bottom + 0.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

then use it like so:

$blue = #0054a6;
a {
    color: $blue;
    @include fake-underline(lighten($blue,20%));
}
a.thick {
    color: $blue;
    @include fake-underline(lighten($blue,40%), 86%, 99%);
}

Update 2: Descenders Tip

If you have a solid background color, try adding a thin text-stroke or text-shadow in the same color as your background to make the descenders look nice.

Credit

This is simplified version of the technique I originally found at https://eager.io/app/smartunderline, but the article has since been taken down.

Unfortunately the eager.io link doesn't work anymore. Do you recall what was the hack to make descenders look nicer? — kano, May 21 '17 at 11:02
@Kano - I believe it was using text-shadow in the same color as a solid background. — squarecandy, May 21 '17 at 15:54
Also, with the technique above you can set the color of the underline different from the text, so sometimes I set it to be lighter than the text, which makes collisions with the descenders less of a problem for readability. — squarecandy, May 21 '17 at 16:00

score 9 · Answer 7 · edited Jul 12 '23 at 02:44

9

There is a easy very answer for this:

text-decoration: underline;
text-underline-offset: 3px;

text-underline-offset is css it's own method. Here is more about text-underline-offset

edited Jul 12 '23 at 02:44

Penny Liu

15,447
5
79
98

answered May 28 '22 at 10:26

Abdulla Ababakre

327
3
4

score 7 · Answer 8 · answered Jun 24 '13 at 17:19

7

I know it's an old question, but for single line text setting display: inline-block and then setting the height has worked well for me to control the distance between a border and the text.

answered Jun 24 '13 at 17:19

Dominic P

2,284
2
27
46

1

I didn't need to set the height. I just wrapped it in another div and as I wanted it to be centered I just set the text-align on the out div. – Guy Lowe Feb 09 '15 at 02:26

score 6 · Answer 9 · answered Apr 16 '13 at 21:08

@last-child's answer is a great answer!

However, adding a border to my H2 produced an underline longer than the text.

If you're dynamically writing your CSS, or if like me you're lucky and know what the text will be, you can do the following:

change the content to something the right length (ie the same
text) set the font color to transparent (or rgba(0,0,0,0) )

to underline <h2>Processing</h2> (for example), change last-child's code to be:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

H2s are block elements which might explain why the underline was longer than the text. Maybe `display: inline-block` would fix it. Replacing the text with `content` looks like a hack that could break in many ways. — last-child, Jun 17 '13 at 10:54

score 3 · Answer 10 · edited Jul 12 '16 at 15:55

See my fiddle.

You would need to use the border width property and the padding property. I added some animation to make it look cooler:

body{
  background-color:lightgreen;
}
a{
  text-decoration:none;
  color:green;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  transition: all .2s ease-in;
}

a:hover{
  color:darkblue;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  padding:2px;
}

<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>

mcmimik · Answer 11 · 2017-09-11T17:51:23.420

If you want:

multiline
dotted
with custom bottom padding
without wrappers

underline, you can use 1 pixel height background image with repeat-x and 100% 100% position:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

You can replace the second 100% by something else like px or em to adjust the vertical position of the underline. Also you can use calc if you want to add vertical padding, e.g.:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

Of course you can also make your own base64 png pattern with another color, height and design, e.g. here: http://www.patternify.com/ - just set square width & height at 2x1.

Source of inspiration: http://alistapart.com/article/customunderlines

score 2 · Answer 12 · answered Mar 25 '19 at 06:40

2

If you are using text-decoration: underline;, then you can add space between underline and text by using text-underline-position: under;

For more The text-underline-position properties, you can have look here

answered Mar 25 '19 at 06:40

Ifrah

143
1
6

score 1 · Answer 13 · answered Oct 08 '16 at 22:48

1

This is what i use:

html:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

css:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }

answered Oct 08 '16 at 22:48

Constantinos Constantinou

11
2

score 1 · Answer 14 · answered Nov 09 '16 at 10:41

An alternative for multiline texts or links, you can wrap your texts in a span inside a block element.

<a href="#">
    <span>insert multiline texts here</span>
</a>

then you can just add border-bottom and padding on the <span>.

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

You may refer to this fiddle. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

score 0 · Answer 15 · edited Jun 17 '16 at 11:57

0

I was able to Do it using the U (Underline Tag)

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>

edited Jun 17 '16 at 11:57

Nikolay Mihaylov

3,868
8
27
32

answered Jun 17 '16 at 10:24

Arun Prasad E S

9,489
8
74
87

score 0 · Answer 16 · edited Nov 08 '18 at 16:58

0

What I use:

<span style="border-bottom: 1px solid black"> Enter text here </span>

edited Nov 08 '18 at 16:58

Zoe

27,060
21
118
148

answered Nov 06 '18 at 13:48

Francis Acosta

71
1
3

Christopher Vickers · Answer 17 · 2021-09-25T07:12:59.730

There are some great solutions here but each one has some issues. The text-underline-offset is different for each browser. The answer by squarecandy also works, however is a little complicated. Using the border-bottom changes the layout of the text and will shift things over.

One solution for adding a custom underline is to make the underline a background image, that is sized relevant to the text size.

    a {
        /* Change the source image to account for changes to the text colour. It should be a single column. */
        background-image: url(data:image/png;base64,iVBORw__EDITED_OUT___0KGgYII=);
        /*background-image: url('underlineImage.png');*/
        background-size: 1px 1.1em;
        background-repeat: repeat-x;
        display: inline;
        cursor: pointer;
        text-decoration: none;
    }

As the text increases, the position remains relative to the text size. With this, you can have any underline image you want such as "a row of stars", or just a line.

The example above does not include the full base64 information to create the effect. This works great across all the browsers since it's a fundamental thing and is pretty compatible with older browsers.

<a href="#">This _____ is the link</a>

If the background image is a png with transparency, it works great on top of other elements.

score 0 · Answer 18 · answered Jun 19 '22 at 13:26

You can do that by using :

text-underline-position: under;

text-underline-offset: {value(px)};

This property will shift the underline, that's below your link by the value of offset that you provided.

For more references, visit: text-underline-offest | developer.mozilla.org

How to increase the gap between text and underlining in CSS

18 Answers18

` so I used `inline-block` as well

Linked

Related