用 CSS 实现下划线
摘要
一篇博客文章探讨了 CSS 下划线长期以来存在的问题（颜色只能继承父元素、粗细不统一），以及 text-decoration-thickness/color 等新属性如今已在所有主流浏览器中普及，开发者无需再用 border 来模拟下划线。
<p><a href="https://lobste.rs/s/ezucf0/css_for_underlines">评论</a></p>
查看缓存全文
缓存时间: 2026/10/12 03:41
# Rubenerd：CSS 下划线
Underlined text has always been a bit of an issue in HTML and CSS. For example:
- 下划线的颜色只能继承自文本颜色。
- CSS 规范并未定义下划线的粗细，而是留给各厂商自行决定。结果就是不同浏览器渲染的下划线粗细不一，尤其是在字号较大的时候。
多年来，变通的办法就是完全放弃（谢天谢地）下划线，转而使用边框来模拟下划线：
```
a {
border-bottom: 1px solid;
text-decoration: none;
}
a::after {
content: "The bird is the word";
}
```
我一直觉得这种方法既不优雅也不美观，因为下划线应该穿过像**g**和**y**这类带下伸部（descender）的字母，而边框做不到这一点。
幸运的是，从 2019 年开始，我们有了这些属性可以使用（https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-decoration-thickness），而且所有主流浏览器厂商似乎都已经实现了它们：
```
a {
text-decoration-line: underline;
text-decoration-color: teal;
text-decoration-style: solid;
text-decoration-thickness: 1px;
}
```
这让我高兴得有点超乎寻常了。
相似文章
CSS：不可避免的坏部分
一位非Web开发者的个人博客文章讨论了CSS中不可避免的坏部分，包括布局难题、浏览器默认设置和过度使用包装器，同时强调了可处理简单任务的子集。
Show HN：Sumi.css – CSS 框架
Show HN 介绍 Sumi.css：一个极简、优先采用无类名设计的 CSS 框架，单文件 6.7KB、无构建步骤、无 JavaScript 依赖，仅通过语义化 HTML 元素即可获得完整样式，支持暗色模式与 CSS 变量主题定制。
CSS 依然很棒
本文赞美了CSS的演进、特性和向后兼容性，强调了它在Web开发中的持续相关性和改进。
CSS Bed：可作为网页开发起点的类无（Classless）CSS 主题合集
CSS Bed 是一个类无（classless）CSS 主题合集，提供 20 多个可作为网页开发起点的轻量主题（如 Pico.css、Water.css、Simple.css），只需在页面 <head> 中引入一段代码即可使用。
算法主题引擎
本文介绍了新的CSS `contrast-color()`函数，该函数允许开发人员自动选择黑色或白色文本，以实现与任何背景颜色的可访问对比度，解决网络上长期存在的低对比度问题，而无需依赖JavaScript。