如何仅为文本中间区域添加背景色？效果类似粗删除线但仅在背景层

解决方法 #

你原来的代码效果不符合预期，是因为h3属于块级元素，默认宽度占满整行，背景色会覆盖整个元素区域。我们可以通过调整背景的尺寸、位置，以及限制元素宽度适配内容来实现需求：

最终代码如下 #

CSS代码

.home-section-title {
  font-family: 'Alegreya Sans SC', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 9px !important;
  font-size: 36px !important;
  color: #000000 !important;
  text-align: center;
  /* 新增以下属性 */
  width: fit-content;
  margin: 0 auto;
  background: linear-gradient(#FFF5F3, #FFF5F3);
  background-size: 100% 45%;
  background-position: center;
  background-repeat: no-repeat;
}

HTML代码（无需修改）

<h3 class="home-section-title">FLASH SALE</h3>

属性说明 #

• width: fit-content：让标题元素的宽度刚好匹配文字内容宽度，不会占满整行
• margin: 0 auto：实现标题的水平居中效果
• background-size: 100% 45%：第二个参数控制背景条的高度，你可以根据需要调整数值（数值越大背景条越粗）
• background-position: center：让背景条垂直居中，刚好显示在文字中间位置

兼容提示：如果需要适配低版本浏览器，也可以保持h3为块级，把文字内容包裹在<span>标签内，把上述新增的背景相关属性加在span的样式上即可，不需要设置width和margin。

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