如何用css伪元素::before制作装饰线

使用CSS ::before伪元素可高效添加装饰线。通过设置content属性并结合定位、尺寸和背景等样式，能在不增加HTML标签的情况下，为标题或文本添加水平线、垂直线或渐变分隔符，提升界面设计感与可读性。

使用CSS伪元素 ::before 制作装饰线，是一种常见且高效的样式手段。它可以在不增加额外HTML标签的情况下，为元素添加视觉上的修饰线条，比如标题下方的横线、文字前的小竖线等。

基本原理

::before 伪元素用于在选定元素的内容之前插入生成的内容。通过设置 content 属性（即使为空），再配合其他样式如背景、边框、宽高等，就能实现装饰线效果。

注意：必须声明 content 属性，否则 ::before 不会生效。

制作水平装饰线（常用于标题）

适用于文章标题、章节标题等场景，让标题更具设计感。

示例代码：

.title {
  position: relative;
  padding-bottom: 10px;
  font-size: 24px;
}

.title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background-color: #007acc;
}

说明：在标题下方添加一条蓝色短横线，通过 position: absolute 定位到标题底部左侧。

制作垂直装饰线或小圆点分隔符

可用于文字前的引导线、分类标签之间的分隔等。

示例：文字前加一条竖线

.label {
  position: relative;
  padding-left: 15px;
  display: inline-block;
}

.label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5px;
  width: 2px;
  height: 100%;
  background-color: #ddd;
}

这条竖线作为视觉引导，增强可读性。

进阶技巧：渐变或带圆角的装饰线

提升设计质感，可以结合CSS渐变、圆角、阴影等属性。

例如使用线性渐变的装饰线：

.fancy-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #ff6b6b, #ffa502);
  border-radius: 2px;
}

这样会让装饰线更有活力，适合活泼风格的页面。

基本上就这些。合理使用 ::before 添加装饰线，能让界面更精致，同时保持HTML结构简洁。