使用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结构简洁。
