用::before伪元素为标题添加装饰线需先设标题position: relative，再用content: "";、width/height、background-color及top: 50%; transform: translateY(-50%);实现垂直居中，left负值控制位置，配合padding-left留白，支持多级标题、响应式与CSS变量主题切换。
直接用 ::before 伪元素在标题前加装饰线，无需额外 HTML 标签，干净又灵活。
确保标题有相对定位
伪元素默认相对于父元素定位，而 ::before 要精准放在标题文字左侧，需让标题自身成为定位上下文：
- 给标题（如
h2）设置position: relative; - 这样
::before就能用absolute相对它定位，不干扰文档流
用 ::before 绘制横线
通过伪元素生成一条细长的背景色块，模拟装饰线：
- 设置
content: "";（必需，否则伪元素不渲染） - 用
width和height控制线条粗细与长度（例如width: 40px; height: 2px;） - 用
background-color设颜色，或用border-bottom等方式实现 - 用
top: 50%; transform: translateY(-50%);垂直居中对齐文字中线
调整位置与间距
让线条紧贴文字左侧、留出呼吸感：
立即学习“前端免费学习笔记（深入）”；
- 用
left: -50px;把线条左移（数值按实际字体大小微调） - 配合标题的
padding-left: 10px;避免文字贴到线太近 - 若需多级标题统一风格，可抽成类名（如
.title-decorated），复用样式
适配不同标题层级和响应式
同一套逻辑可扩展使用：
- 对
h1、h3分别写选择器，调整width或left值以匹配字号 - 在小屏幕下用媒体查询缩小线条长度或隐藏装饰线，保持简洁
- 支持主题色切换：把
background-color换成 CSS 变量（如var(--accent-color)）
基本上就这些——不复杂但容易忽略定位上下文和垂直对齐细节。
