如何用CSS去除中间带文字水平线的文字白色背景

你的原代码是通过给<span>设置白色背景来遮挡下方的边框线，现在要去掉这个白色背景，我们可以换用更灵活的方式实现文字居中分隔线的效果，推荐两种实用方法：

方法一：Flexbox布局（推荐，适配性更强） #

这种方式不需要手动计算宽度，线条会自动填充文字两侧的空间，完美适配不同长度的文字：

.asses {
  width: 100%;
  display: flex;
  align-items: center; /* 让线条和文字垂直居中对齐 */
  margin: 10px 0 20px;
  gap: 10px; /* 控制文字和左右线条的间距 */
}

.asses::before,
.asses::after {
  content: "";
  flex: 1; /* 让两个伪元素平分剩余宽度 */
  height: 1px;
  background-color: #b7d9eb; /* 线条颜色和原代码保持一致 */
}

.asses span {
  font-size: 43px;
  font-family: 'lato';
  color: #555555;
  /* 直接去掉原有的background属性，不需要再遮挡线条 */
}

HTML部分保持不变即可：

<h2 class="asses">
  <span>My TEXT HERE</span>
</h2>

方法二：伪元素定位法 #

如果更习惯用定位逻辑实现，也可以采用这种方式：

.asses {
  width: 100%;
  text-align: center;
  margin: 10px 0 20px;
  position: relative; /* 为伪元素提供定位基准 */
}

.asses::before,
.asses::after {
  content: "";
  position: absolute;
  top: 50%; /* 让线条垂直居中 */
  transform: translateY(-50%); /* 微调确保完全居中对齐 */
  width: calc(50% - 70px); /* 计算线条宽度，留出文字和间距的空间，可根据文字长度调整数值 */
  height: 1px;
  background-color: #b7d9eb;
}

.asses::before {
  left: 0; /* 左边线条对齐容器左侧 */
}

.asses::after {
  right: 0; /* 右边线条对齐容器右侧 */
}

.asses span {
  padding: 0 10px;
  font-size: 43px;
  font-family: 'lato';
  color: #555555;
  /* 移除background属性，线条不会再穿过文字 */
}

原方法的局限说明 #

原代码里<h2>的border-bottom是一条贯穿整个容器的线，<span>的白色背景本质是盖住文字下方的线条部分。一旦去掉白色背景，线条就会直接穿过文字，所以我们需要把单条线拆成左右两段，绕过中间的文字——这就是上面两种方法的核心思路。

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