How to increase the gap between text and underlining in 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
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.
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.