CSS标题前加装饰线不加标签，可通过 ::before 伪元素实现。具体方法如下：✅ 实现方式使用 ::before 伪元素，在标题前插入横线，无需添加额外 HTML 标签。示例代码：.title::before { content: ''; display: inline-block; width: 100px; /* 横线长度 */ height: 2px; /

本文详解如何利用 CSS `::before` 伪元素为标题（如 h1、h2）优雅添加左侧装饰横线，全程无需修改 HTML 结构——只需为标题设置 `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)）

基本上就这些——不复杂但容易忽略定位上下文和垂直对齐细节。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~