css 文本装饰线那些你可能不知道的属性
2025-06-12
什么是文本装饰线？比如给文本添加下划线、中划线、上划线等。
下划线: text-decoration: underline;
中划线: text-decoration: line-through;
上划线: text-decoration: overline;
css 还提供了很多属性可以更加细致的去描述装饰线。
比如想要修改装饰线的颜色，可以使用 text-decoration-color 属性。
下划线: text-decoration-color: red;
中划线: text-decoration-color: red;
上划线: text-decoration-color: red;
比如想要修改装饰线的样式，将装饰线变成虚线或者波浪线，可以使用 text-decoration-style 属性。
下划线: text-decoration-style: solid; (实线。默认值)
下划线: text-decoration-style: double; (双实线)
下划线: text-decoration-style: dotted; (虚线)
下划线: text-decoration-style: dashed; (虚线)
下划线: text-decoration-style: wavy; (波浪线)
比如觉得装饰线默认太细了，想要变粗一点，可以使用 text-decoration-thickness 属性。
下划线: text-decoration-thickness: 1px;
下划线: text-decoration-thickness: 3px;
下划线: text-decoration-thickness: 5px;
上面👆🏻这些属性大多数前端开发人员都知道，但是下面👇🏻这些属性可能很多人不知道。
如下示例，可以看到下划线是不连续的，遇到字母 g、y、p 会断开。
Target Typing
如果想要下划线一直保持连续状态，可以使用 text-decoration-skip-ink 属性。
Target Typing (text-decoration-skip-ink: none;)
下划线现在变得连续了，但是会压住一些字母。
如果希望下划线既保持连续，又不要压住字母，可以使用 text-underline-position 属性。
Target Typing (text-underline-position: under;)
如果你还觉得下划线距离文本太近了，你想要下划线距离文本远一点，可以使用 text-underline-offset 属性。
Target Typing
Target Typing (text-underline-offset: 5px;)
Target Typing (text-underline-offset: 10px;)
案例：
↶ 返回首页 ↶