css 字体下划线

作者：二分醒amor 发布日期:2026-07-22 浏览:91

/* 使用 text-decoration 属性来添加下划线 */
p {
  text-decoration: underline;
}

/* 如果需要自定义下划线的样式，可以使用 ::after 伪元素 */
p.custom-underline {
  position: relative;
  display: inline;
}

p.custom-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: red;
}

解释说明：

text-decoration: underline;：这是最简单的方式，直接给文本添加下划线。适用于大多数情况。
::after 伪元素：如果你想自定义下划线的颜色、宽度或位置，可以使用 ::after 伪元素。这种方式更灵活，可以创建更复杂的下划线效果。

上一篇：css 宽度

下一篇：css文字缩进两个字符