CSS for underlines

Ruben Schade notes that the long-standing workaround of faking link underlines with borders is no longer needed, since all major browsers now support text-decoration-color, text-decoration-style and text-decoration-thickness.

Monday 12 October 2026

Underlined text has always been a bit of an issue in HTML and CSS. For example:

The colour of the underline could only be inherited from the text.
The CSS specification doesn’t define an underline thickness, leaving it to vendors to decide how to derive it. The end result was some browsers rendering thicker underlines than others, especially at larger font sizes.

The workaround for decades was to eschew (gesundheit) underlines entirely, and use a border as a pseudo underline:

a {
    border-bottom:   1px solid;
    text-decoration: none;
}
   
a::after {
    content: "The bird is the word";
}

This always struck me as inelegant and ugly, because underlines should cross characters with descenders like g** and **y, and borders don’t.

Fortunately, starting in 2019 we’ve had these attributes to play with, and it appears all major browsers vendors have now implemented them:

a {
    text-decoration-line:      underline;
    text-decoration-color:     teal;
    text-decoration-style:     solid;
    text-decoration-thickness: 1px;
}

This makes me happier than it should.

#internet #css #fonts