How to increase the gap between text and underlining in CSS

user_35026 0
Viewed 546672

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

underline css
18 Answers

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

user_138290000

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>

user_29132030

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 abouttext-underline-offset

user_119284410

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

user_74890110

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

What I use:

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

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.

user_59056880

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

user_167971040
Related