How to increase the gap between text and underlining in CSS

CssUnderline

Css Problem Overview

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

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

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.

Solution 3 - Css

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.

Solution 4 - Css

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

Solution 5 - Css

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>

Solution 6 - Css

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.

Solution 7 - Css

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.

Solution 8 - Css

@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:

  1. change the content to something the right length (ie the same

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

Solution 9 - Css

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>

Solution 10 - Css

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

Solution 11 - Css

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/

Solution 12 - Css

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

Solution 13 - Css

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

Solution 14 - Css

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>

Solution 15 - Css

What I use:

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

Solution 16 - Css

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.

Categories
Recommended Css Solutions
Recommended Underline Solutions

Previous Solution:

Where can I find the error logs of nginx, using FastCGI and Django?

DjangoNginxFastcgiError Log

Next Solution:

Detect all changes to a <input type="text"> (immediately) using JQuery

JavascriptJqueryHtml

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionmaxpView Question on Stackoverflow
Solution 1 - CsschelmertzView Answer on Stackoverflow
Solution 2 - Csslast-childView Answer on Stackoverflow
Solution 3 - CssDuc HuynhView Answer on Stackoverflow
Solution 4 - CssBALAJI PILLAIView Answer on Stackoverflow
Solution 5 - CssGroosaluggView Answer on Stackoverflow
Solution 6 - CsssquarecandyView Answer on Stackoverflow
Solution 7 - CssDominic PView Answer on Stackoverflow
Solution 8 - CssMichael GreismanView Answer on Stackoverflow
Solution 9 - CssStardustView Answer on Stackoverflow
Solution 10 - CssmcmimikView Answer on Stackoverflow
Solution 11 - CssDaniel HernandezView Answer on Stackoverflow
Solution 12 - CssIfrahView Answer on Stackoverflow
Solution 13 - CssConstantinos ConstantinouView Answer on Stackoverflow
Solution 14 - CssArun Prasad E SView Answer on Stackoverflow
Solution 15 - CssFrancis AcostaView Answer on Stackoverflow
Solution 16 - CssChristopher VickersView Answer on Stackoverflow