使用::before伪元素可添加装饰线条。1. 需设置content并配合定位；2. 常见应用如渐变下划线、竖线引导、分隔符；3. 注意定位、动画与可访问性，提升视觉效果且保持HTML简洁。

在CSS中使用::before伪元素制作装饰线条，是一种常见且灵活的布局技巧。它可以在不增加额外HTML标签的情况下，为元素添加视觉上的修饰线条，比如下划线、边框延伸、分隔线等。

1. 基本语法与结构

::before伪元素通过content属性生成内容（即使为空），然后可以设置样式来创建线条。

注意：如果content缺失或为空字符串以外的值，伪元素不会显示。

.element::before {
  content: ""; /* 必须存在 */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background-color: #000;
}

提示：通常需要将父元素设为position: relative，以便绝对定位伪元素。

2. 常见装饰线条示例

带渐变的下划线线条

立即学习“前端免费学习笔记（深入）”；

替代默认text-decoration，实现更美观的标题下划线。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

.title::before {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #ff6b6b, #ee5a24);
  margin: 8px 0;
}

从左侧延伸的竖线

用于列表项或章节前的引导线。

.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: -10px;
  width: 3px;
  height: 50px;
  background-color: #333;
  border-radius: 2px;
}

两端短横线 + 中间点的分隔符

常用于页面模块之间的装饰性分隔。

.divider::before {
  content: " ";
  display: block;
  width: 60%;
  margin: 20px auto;
  border-top: 1px dashed #ccc;
  position: relative;
}

.divider::before::after {
  /* 注意：不能嵌套伪元素，应使用其他方式实现 */
}

说明：若需复杂图形，可结合::after共同完成。

3. 实用技巧与注意事项

• 定位控制： 使用position: absolute精确控制线条位置，父容器记得position: relative
• 尺寸灵活： 可用transform: scaleX()做动画伸缩效果
• 动画支持： 配合transition实现线条出现/滑入动画
• 可访问性： 装饰性内容不影响语义，无需担心屏幕阅读器问题

基本上就这些。合理利用::before，能让你的页面细节更精致，同时保持HTML简洁。