HTML怎么做标题装饰线_html标题左右装饰线样式实现【速查】-html教程-PHP中文网

用 border + padding 实现标题左右装饰线最稳：将标题设为 inline-block，左右加 border，用 padding 控制间距；伪元素方案更灵活但需注意 content、定位和兼容性；禁用语义错误的。

html怎么做标题装饰线_html标题左右装饰线样式实现【速查】

用 `border` + `padding` 实现标题左右装饰线最稳

纯 CSS 实现标题左右带线（如“—— 标题 ——”效果），不依赖额外标签或伪元素，border 配合内边距是最兼容、最可控的方式。关键在于把标题设为 inline 或 inline-block，再用左右 border 模拟线条，用 padding 控制间距。

常见错误是直接给 <h2></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">）必须设 <code>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);
}