用 border + padding 实现标题左右装饰线最稳：将标题设为 inline-block，左右加 border，用 padding 控制间距；伪元素方案更灵活但需注意 content、定位和兼容性；禁用语义错误的 <hr>。
用 border + padding 实现标题左右装饰线最稳
纯 CSS 实现标题左右带线（如“—— 标题 ——”效果），不依赖额外标签或伪元素，border 配合内边距是最兼容、最可控的方式。关键在于把标题设为 inline 或 inline-block，再用左右 border 模拟线条，用 padding 控制间距。
常见错误是直接给 <h2> 加 border-bottom——这只能出下划线；想左右都有线，必须让容器能“撑开”左右空间。
- 把标题设为
display: inline-block，否则padding对block元素左右无效（它会占满整行） - 左右
border宽度建议用px（如1px solid #ccc），避免在高缩放比下模糊 - 左右
padding值要略大于 border 宽度，否则线会紧贴文字，视觉拥挤（例如padding: 0 12px）
<h2 class="title-line">联系我们</h2>
.title-line {
display: inline-block;
padding: 0 12px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}用 ::before / ::after 伪元素更灵活但要注意定位
如果需要线长可变、颜色不同、或加图标，伪元素方案更适合。但新手常踩的坑是：没设 content: ""、忘了 position: absolute、或者父容器没设 position: relative。
典型场景：标题居中，左右各一条等长细线延伸到容器边缘。
立即学习“前端免费学习笔记（深入）”；
- 父容器（如
<div class="title-wrap">）必须设position: relative -
::before和::after需显式声明content: ""，否则不渲染 - 用
top: 50%+transform: translateY(-50%)垂直居中线，比line-height更可靠 - 宽度用
calc(50% - 60px)这类表达式控制，减去的是标题文字宽 + 内边距
.title-wrap {
position: relative;
text-align: center;
}
.title-wrap::before,
.title-wrap::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 1px;
background: #eee;
}
.title-wrap::before {
left: 0;
width: calc(50% - 60px);
}
.title-wrap::after {
right: 0;
width: calc(50% - 60px);
}移动端适配时 vw 和 max-width 得配合着用
在小屏上，左右装饰线太长会挤占文字空间，甚至换行。单纯用 % 或 px 不够智能。
真正好用的组合是：width: min(120px, 25vw) 控制单侧线长上限，再配合 max-width 限制整个标题块宽度。
- 避免用
100vw直接铺满——滚动条存在时会溢出 - 用
min()函数（现代浏览器支持良好）比媒体查询更简洁 - 如果必须兼容 IE，改用
@media (max-width: 480px)单独降级为固定80px
别用 <hr> 套标题——语义错、样式僵、SEO 友好度低
有人图省事把 <hr> 和 <h2> 并列写，再用 CSS 横向拉伸。这会导致两个问题：<hr> 是分隔符语义，跟标题无从属关系；而且它默认是 block，强行 inline 后垂直对齐总出偏差。
更麻烦的是，屏幕阅读器会把它读作“水平线”，打断标题的语义流。
- HTML 结构应保持标题为单一元素，装饰属于表现层，由 CSS 承担
- 所有装饰线都应通过
border、伪元素或背景渐变实现，而非插入额外语义标签 - 若用 SVG 画线，务必加
aria-hidden="true"，避免干扰辅助技术
实际项目里，最常被忽略的是伪元素的 z-index 层级和文字颜色对比度。线太淡（比如 #eee 在白色背景上）在弱光设备下几乎看不见，建议用至少 #ccc 起步，并检查 WCAG AA 对比度。
