使用CSS ::before伪元素可灵活创建装饰线条。1. 必须设置content: ""并结合position、width、height和background等属性定义样式；2. 示例中通过绝对定位与transform实现标题下居中短横线；3. 扩展用渐变背景生成中间实两边透明的装饰线；4. 多段线可用竖线框模拟，配合vertical-align确保与文字对齐。
使用 CSS 的 ::before 伪元素制作装饰线条，是一种常见且灵活的前端技巧。它可以在不增加 HTML 标签的前提下，为元素添加视觉上的修饰线条，比如下划线、边框延伸、小横线等。
1. 基本原理与结构
::before 伪元素允许你在目标元素的内容前插入生成的内容，配合 content 属性和样式控制，可以绘制线条。
关键点：- 必须设置 content: ""（即使为空），否则 ::before 不会显示
- 通常使用 position: absolute 定位，便于控制线条位置
- 通过 width、height、background 或 border 来定义线条样式
2. 示例：标题下方的装饰短线
常用于文章标题或模块标题，增强设计感。
.title {
position: relative;
font-size: 24px;
padding-bottom: 10px;
}
.title::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: #007acc;
}
说明：- 给标题设置相对定位，让 ::before 可以相对于它定位
- 用 left: 50% 和 transform: translateX(-50%) 实现水平居中
- 高度和背景色构成一条蓝色短横线
3. 扩展样式：带圆角或渐变的线条
可以通过调整 CSS 属性实现更丰富的视觉效果。
立即学习“前端免费学习笔记（深入）”；
.fancy-title::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #007acc, transparent);
}特点：- 渐变背景让线条中间实，两边透明，更有设计感
- 放在标题下方稍偏移的位置，形成装饰性分隔线
4. 多段装饰线或小竖线
适合用于导航项之间或标签前的小装饰。
.nav-item::before {
content: "|";
color: #ccc;
margin: 0 8px;
}
/ 或者用竖线框模拟 /
.nav-item::before {
content: "";
display: inline-block;
width: 1px;
height: 1em;
background-color: #ccc;
margin: 0 6px;
vertical-align: middle;
}
提示：- 用字符 "|" 简单但不够可控；推荐用宽高+背景的方式
- vertical-align: middle 让线条与文字垂直对齐
基本上就这些方法，灵活运用 position、尺寸和背景，就能做出各种装饰线条效果。关键是理解 ::before 的生成机制和定位方式。
