下划线 css

作者：颠峰神射发布日期:2025-03-11 浏览:312

/* 下划线效果的 CSS 示例 */

/* 简单的下划线 */
.text-underline {
    text-decoration: underline;
}

/* 自定义下划线样式 */
.custom-underline {
    text-decoration: underline;
    text-decoration-color: red; /* 下划线颜色 */
    text-decoration-thickness: 2px; /* 下划线粗细 */
    text-underline-offset: 4px; /* 下划线与文本的距离 */
}

解释说明：

text-decoration: underline;：这是最基本的下划线样式，直接给文本添加一条默认样式的下划线。
自定义下划线样式：
- text-decoration-color: 设置下划线的颜色。
- text-decoration-thickness: 设置下划线的粗细。
- text-underline-offset: 设置下划线与文本之间的距离。

你可以根据需要调整这些属性来实现不同的视觉效果。

上一篇：css hsla

下一篇：css 颜色代码