HTML/CSS如何不添加外层div实现标题后方水平横线效果

不需要套外层div，纯CSS即可实现，以下是两种可直接复用的方案：

方案1：纯色背景场景兼容方案 #

你之前用::before画横线的思路是对的，只需要补几行样式，让文字区域挡住中间段的横线即可：

h3{
  text-align: center;
  line-height: 50px;
  position: relative;
  font-size: 30px;
  /* 新增样式 */
  display: inline-block;
  padding: 0 20px; /* 控制文字和两侧横线的间距 */
  background: #ffffff; /* 和页面背景色保持一致即可 */
  /* 让inline-block的标题水平居中 */
  left: 50%;
  transform: translateX(-50%);
}

h3::before{
  display: block;
  background: red;
  width: 100vw; /* 横线铺满整行宽度 */
  height: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  z-index: -1; /* 横线放在文字层下方，避免穿字 */
}

HTML结构完全不需要改动：

<h3>TESTING</h3>

这个方案兼容所有老旧浏览器，适合页面是纯色背景的场景。

方案2：Flex自适应方案（推荐） #

如果页面是渐变、背景图这类非纯色背景，靠背景遮挡的方案会穿帮，可以用双伪元素配合Flex布局实现，完全不需要依赖背景色：

h3{
  font-size: 30px;
  line-height: 50px;
  display: flex;
  align-items: center;
  gap: 20px; /* 控制文字和两侧横线的间距 */
}
h3::before,
h3::after{
  content: '';
  flex: 1;
  height: 4px;
  background: red;
}

这个写法下，两个伪元素会自动占满文字两侧的剩余宽度，不管标题文字多长都能自适应，不需要手动算偏移值，适配性更好，是目前主流的实现方式。

注意：用方案2时不要给h3加text-align: center属性，Flex布局会自动让文字在两条横线中间居中。

内容的提问来源于stack exchange，提问作者niccol