How make text-decoration: underline with 2px padding?

Question

I like an obedient frotend developer must create underline with 2px padding instead of 1px by default. Is exist simple solution for this?

PS Yeahh guys, I know about div with black backgrond color and 1px * Npx and position: relative, but It's so slowly...

Answer 1

You could wrap the text in a span and give it a border-bottom with padding-bottom:2px;.

Like so

span{
    display:inline-block;
    border-bottom:1px solid black;
    padding-bottom:2px;
}

Example: http://jsfiddle.net/uSMGU/

Answer 2

For cross-browsing it is better to use text-underline-offset over the text-underline-position, because text-underline-position isn't supported by iOS Safari

So use this answer: https://stackoverflow.com/a/63607426/1894907

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

Answer 3

A great way to do this without adding and extra spans and having more control is using the :after selector.

Useful especially for navigation menus:

.active a:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

If you want more or less space between the text and the underline, add a margin-top.

If you want a thicker underline, add more height:

.active a:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}

Answer 4

Simply use:

text-decoration: underline;
text-underline-position: under;