Edit line thickness of CSS 'underline' attribute

Question

Since you can underline any text in CSS like so:

h4 {
    text-decoration: underline;
}

How can you also then edit the \'line\' that is drawn

Answer 1

The background-image can also be used to create an underline. This method handles line breaks.

It has to be shifted down via background-position and repeated horizontally. The line width can be adjusted to some degree using background-size (the background is limited to the content box of the element).

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

     Underlined

     Text