如何用SCSS实现带背景色标题？现有方案无效求解决

先明确你之前的核心问题：

• HTML结构存在未闭合的div，导致层级混乱
• SCSS选择器嵌套错误，.volunteer__title--text的样式被错误定义为.volunteer__title--bg--text，无法匹配HTML中的类
• 使用fixed定位不符合需求，它是相对于视口定位，而非父容器

方案一：修正原有结构实现 #

修正后的HTML结构

<div class="volunteer__title">
  <div class="volunteer__title--bg"></div>      
  <div class="volunteer__title--text">Volunteer</div>
</div>

对应SCSS代码

&__title {
  display: flex;
  align-items: center;
  font-family: "Fredoka", sans-serif;
  font-size: 30px;
  position: relative;
  padding: 5px 0;

  &--bg {
    background-color: $darkGreen;
    width: 100px;
    height: 25px;
    border-radius: 5px;
    position: absolute;
    z-index: -1;
    top: 50%;
    transform: translateY(-50%);
  }

  &--text {
    margin-left: 4px;
  }
}

方案二：用伪元素简化结构（更推荐） #

不需要额外的背景div，直接通过伪元素生成背景，结构更简洁：

简化后的HTML结构

<div class="volunteer__title">Volunteer</div>

对应SCSS代码

&__title {
  font-family: "Fredoka", sans-serif;
  font-size: 30px;
  position: relative;
  display: inline-block;
  padding: 0 6px;

  &::before {
    content: "";
    position: absolute;
    background-color: $darkGreen;
    width: calc(100% - 12px);
    height: 25px;
    border-radius: 5px;
    z-index: -1;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
  }
}

两种方案都能实现背景色块在文字下方的效果，你可以根据实际需求调整背景的尺寸、位置偏移量来匹配参考效果。

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