---
title: "CSS for underlines"
slug: css-for-underlines
url: https://listedarticles.com/articles/css-for-underlines
canonical_url: https://www.rubenerd.au/css-for-underlines/
content_type: blog_post
language: en
published_at: 2026-10-11T22:21:07.000Z
updated_at: 2026-10-12T02:08:13.185Z
author: "Ruben Schade"
authored_by: human
publisher: "Rubenerd"
publisher_url: https://www.rubenerd.au/
topics: ["Web Development"]
license: all-rights-reserved
word_count: 164
reading_minutes: 1
citation: "Ruben Schade, Rubenerd. \"CSS for underlines.\" 11 Oct 2026. https://www.rubenerd.au/css-for-underlines/ (all-rights-reserved)"
---

# 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.

## [CSS for underlines](https://www.rubenerd.au/css-for-underlines/)

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](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-decoration-thickness), 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](https://www.rubenerd.au/internet/) [#css](https://www.rubenerd.au/tag/css/) [#fonts](https://www.rubenerd.au/tag/fonts/)