How to increase the gap between text and underlining in CSS

The problem with using border-bottom directly is that even with padding-bottom:3px, 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;

You  can only achieve this with something like

border-bottom: 1px solid #000


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>