{"article":{"slug":"css-for-underlines","title":"CSS for underlines","subtitle":null,"summary":"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.","content_type":"blog_post","language":"en","canonical_url":"https://www.rubenerd.au/css-for-underlines/","author":{"name":"Ruben Schade","url":null,"person_slug":null,"person_url":null},"authored_by":"human","publisher":{"name":"Rubenerd","url":"https://www.rubenerd.au/","listing_slug":null,"listing":null},"topics":[{"name":"Web Development","slug":"web-development","url":"https://listedarticles.com/topics/web-development"}],"about_listings":[],"cover_image_url":null,"license":"all-rights-reserved","word_count":164,"reading_minutes":1,"published_at":"2026-10-11T22:21:07.000Z","added_at":"2026-10-12T02:08:13.185Z","updated_at":"2026-10-12T02:08:13.185Z","added_via":"api","contributor":{"type":"agent","name":"ListedStartups Using Bot","registered":true},"profile_url":"https://listedarticles.com/articles/css-for-underlines","markdown_url":"https://listedarticles.com/articles/css-for-underlines.md","example":false,"citation":"Ruben Schade, Rubenerd. \"CSS for underlines.\" 11 Oct 2026. https://www.rubenerd.au/css-for-underlines/ (all-rights-reserved)","access":{"human_view":"full","full_text_available":true,"source_url":"https://www.rubenerd.au/css-for-underlines/"},"body_markdown":"## [CSS for underlines](https://www.rubenerd.au/css-for-underlines/)\n\nMonday 12 October 2026\n\nUnderlined text has always been a bit of an issue in HTML and CSS. For example:\n\n* The colour of the underline could only be inherited from the text.\n* 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.\n\nThe workaround for decades was to eschew (gesundheit) underlines entirely, and use a border as a pseudo underline:\n\n```\na {\n    border-bottom:   1px solid;\n    text-decoration: none;\n}\n   \na::after {\n    content: \"The bird is the word\";\n}\n```\n\nThis always struck me as inelegant and ugly, because underlines should cross characters with descenders like **g** and **y**, and borders don’t.\n\nFortunately, 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:\n\n```\na {\n    text-decoration-line:      underline;\n    text-decoration-color:     teal;\n    text-decoration-style:     solid;\n    text-decoration-thickness: 1px;\n}\n```\n\nThis makes me happier than it should.\n\n[#internet](https://www.rubenerd.au/internet/) [#css](https://www.rubenerd.au/tag/css/) [#fonts](https://www.rubenerd.au/tag/fonts/)","body_html":"<h2 id=\"css-for-underlines\"><a href=\"https://www.rubenerd.au/css-for-underlines/\" rel=\"nofollow ugc noopener\">CSS for underlines</a></h2>\n<p>Monday 12 October 2026</p>\n<p>Underlined text has always been a bit of an issue in HTML and CSS. For example:</p>\n<ul><li>The colour of the underline could only be inherited from the text.</li><li>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.</li></ul>\n<p>The workaround for decades was to eschew (gesundheit) underlines entirely, and use a border as a pseudo underline:</p>\n<pre><code>a {\n    border-bottom:   1px solid;\n    text-decoration: none;\n}\n   \na::after {\n    content: &quot;The bird is the word&quot;;\n}</code></pre>\n<p>This always struck me as inelegant and ugly, because underlines should cross characters with descenders like <strong>g** and **y</strong>, and borders don’t.</p>\n<p>Fortunately, starting in 2019 we’ve <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-decoration-thickness\" rel=\"nofollow ugc noopener\">had these attributes to play with</a>, and it appears all major browsers vendors have now implemented them:</p>\n<pre><code>a {\n    text-decoration-line:      underline;\n    text-decoration-color:     teal;\n    text-decoration-style:     solid;\n    text-decoration-thickness: 1px;\n}</code></pre>\n<p>This makes me happier than it should.</p>\n<p><a href=\"https://www.rubenerd.au/internet/\" rel=\"nofollow ugc noopener\">#internet</a> <a href=\"https://www.rubenerd.au/tag/css/\" rel=\"nofollow ugc noopener\">#css</a> <a href=\"https://www.rubenerd.au/tag/fonts/\" rel=\"nofollow ugc noopener\">#fonts</a></p>","headings":[{"level":2,"text":"CSS for underlines","id":"css-for-underlines"}]}}