Menu
Using CSS, when text has text-decoration:underline applied, is it possible to increase the distance between the text and the underline?
244
The "Add space for underlines" layout option is used when you want to increase the gap between the text and underline. Try to underline first the words, sentences or paragraphs that you want to underline then click the said option to add space in between them.
If you want to place an indent on the first line of a block element like <p>, use the CSS text-indent property. For example, to add an indent of 4 spaces, apply the rule text-indent: 4em; to the element. You can also use a different length unit like px or cm, or set the indent as a percentage of the page width: HTML.
In the horizontal text we use text-underline-position: under; to put the underline below all the descenders. In the text with a vertical writing-mode set, we can then use values of left or right to make the underline appear on the left or right of the text as required.
The text-underline-offset property in CSS sets the distance of text underlines from their initial position. Once you apply an underline for an element using text-decoration with the value of underline, you can say how far that line should be from your text using the text-underline-offset property.
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
96
Update 2021: text-underline-offset now works in almost all major and newest versions of browsers (IE11 is a no-go): https://caniuse.com/?search=text-underline-offset
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
