css文字下划线

作者：血舞悲鸣发布日期:2025-09-16 浏览:100

/* 示例代码：CSS文字下划线 */

/* 方法1：使用 text-decoration 属性 */
p.underline {
    text-decoration: underline;
}

/* 方法2：使用 border-bottom 属性（可以自定义下划线样式） */
p.border-underline {
    border-bottom: 1px solid black;
}

/* 方法3：使用 ::after 伪元素（可以实现更复杂的下划线效果） */
p.after-underline::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: black;
    margin-top: 2px;
}

解释说明：

方法1 使用 text-decoration: underline; 是最简单的方式，直接给文本添加下划线。
方法2 使用 border-bottom 可以自定义下划线的颜色、宽度等样式。
方法3 使用 ::after 伪元素可以实现更复杂的效果，例如带间距的下划线或渐变下划线。

上一篇：css注释

下一篇：css 文字两端对齐