Menu
Is it possible to change to the underline height from when the developer uses text-decoration: underline; in CSS to create an underline?
Using CSS I made the word "about" which has an 'id' of '#title4' have an underline and I was wondering how I can change the distance of the height from the underline to the word so there is a bigger gap between both?
Example of what I'm looking for
#title4 {
font-size: 2.5rem;
font-weight: 700;
margin-top: 5rem;
text-decoration: underline;
}
Site code
688
unfortunately, you cannot control text-decoration height and spacing between text.
In CSS, we will use text-decoration property to style underline. CSS text-decoration-color Property: This property is used to specify the color of decorations (overlines, underlines, and line-throughs) over the text.
You cannot modify the width of underline tag. Instead go for Border-bottom approach and change it's properties as required.
The property text-decoration-line is used to underline the text. This property has three values that are overline, underline, or line-through. So, the value underline is used to underline the text in CSS. This value draws the underline beneath the inline text.
The text-decoration-thickness CSS property sets the thickness, or width, of the decoration line that is used on text in an element, such as a line-through, underline, or overline.
(Edge 87, Firefox 70, Safari 12, Chrome 87)
Syntax: auto | from-font | |
e.g.
.css_class
{
text-decoration: underline;
text-decoration-color: red;
text-decoration-style: solid;
text-decoration-thickness: 5px;
}<div class="css_class">Test</div>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
