Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

css 文本下划线

作者:死亡之神   发布日期:2025-10-14   浏览:13

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

/* 如果需要更复杂的下划线样式,可以使用 border-bottom 或者 ::after 伪元素 */
p.fancy-underline {
  position: relative;
  display: inline-block;
}

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

解释说明:

  1. text-decoration: underline;:这是最简单的方式,直接给文本添加下划线。适用于大多数基本场景。
  2. border-bottom::after 伪元素:如果你需要更复杂的下划线样式(例如不同颜色、宽度或位置),可以使用 border-bottom::after 伪元素来实现。

希望这些示例代码对你有帮助!

上一篇:animation css3

下一篇:css文字删除线

大家都在看

css好看的字体

css 红色

css 瀑布流布局grid

css文字超长省略号

css 渐变字体

css背景图片等比例缩放

css文字删除线

css 文本下划线

animation css3

css 自定义滚动条

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站