使用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; } <p>.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; } <p>/<em> 或者用竖线框模拟 </em>/ .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 的生成机制和定位方式。