cssunderline

How to increase the gap between text and underlining in CSS

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

Solution

  • 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