Фон заголовка с помощью scss

Я внес изменение, используя свойство display, с fixed на absolute.

Фиксированное позиционирование:
Когда для элемента установлено значение position: fixed;, он позиционируется относительно области просмотра окна браузера независимо от прокрутки. Это означает, что даже если пользователь прокручивает страницу, элемент останется на том же месте на экране. Фиксированные элементы часто используются для верхних и нижних колонтитулов или панелей навигации, которые должны оставаться видимыми все время.

Абсолютное позиционирование:
С другой стороны, когда для элемента установлено значение position: absolute;, он позиционируется относительно своего ближайшего позиционированного предка (элемент со значением позиции, отличным от статического) или начального содержащего блока документа, если позиционированный предок не найден. Абсолютное позиционирование выводит элемент из обычного потока документа, позволяя точно расположить его в любом месте страницы. Когда страница прокручивается, элементы с абсолютным позиционированием будут перемещаться вместе со своим позиционированным предком.

Я смешал display: absolute; и z-index: -1; (проверьте код ниже).

Также отметьтесь width: fit-content в volunteer__title.

Пример 1

.volunteer__title {
    font-family: "Fredoka", sans-serif;
    font-size: 30px;
    position: relative;
    width: fit-content;
    font-weight: 500;
}

.volunteer__title--bg {
  position: absolute;
  background-color: #8FD192;
  width: 116px;
  height: 25px;
  border-radius: 5px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  margin-top: 6px;
  right: -3px;
}

<link rel = "preconnect" href = "https://fonts.googleapis.com">
<link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
<link href = "https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap" rel = "stylesheet">

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

В СКСС:

.volunteer__title {
    font-family: "Fredoka", sans-serif;
    font-size: 30px;
    position: relative;
    width: fit-content;
    font-weight: 500;

    &--bg {
        position: absolute;
        background-color: #8FD192;
        width: 116px;
        height: 25px;
        border-radius: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
        margin-top: 6px;
        right: -3px;
    }
}

Пример 2

В этом примере я избавился от элемента bg и использовал ::after, который создает псевдоэлемент выбранного элемента (text).

.volunteer__title {
    font-family: "Fredoka", sans-serif;
    font-size: 30px;
    position: relative;
    width: fit-content;
    font-weight: 500;
}

.volunteer__title--text::after {
  display: block;
  content: '';
  position: absolute;
  background-color: #8FD192;
  width: 116px;
  height: 25px;
  border-radius: 5px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  margin-top: 6px;
  right: -3px;
}

<link rel = "preconnect" href = "https://fonts.googleapis.com">
<link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
<link href = "https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap" rel = "stylesheet">

<div class = "volunteer__title">
    <div class = "volunteer__title--text" >volunteer</div>
</div>

В СКСС:

.volunteer__title {
    font-family: "Fredoka", sans-serif;
    font-size: 30px;
    position: relative;
    width: fit-content;
    font-weight: 500;

    &--text::after {
        display: block;
        content: '';
        position: absolute;
        background-color: #8FD192;
        width: 116px;
        height: 25px;
        border-radius: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
        margin-top: 6px;
        right: -3px;
    }
}

Для получения более подробной информации об этих свойствах перейдите по ссылкам ниже:

CSS-трюки | Абсолютное, относительное, фиксированное позиционирование
МДН | z-индекс
МДН | :: после

В то время как @001 был на правильном пути, необходимо внести некоторые изменения, чтобы добавить отзывчивости и упростить весь случай.

Прежде всего, вы не должны использовать элемент HTML для создания зеленого поля, а псевдоэлемент, используя либо ::before или ::after, а затем размещая его с помощью position: absolute в относительных единицах.

.volunteer__title {
    font-family: "Fredoka", sans-serif;
    font-size: 30px;
    position: relative;
    width: fit-content;
    font-weight: 500;
}

.volunteer__title::after {
  content: "";
  display: block;
  background-color: #8FD192;
  border-radius: 5px;
  position: absolute;
  top: 0.4em;
  right: -0.1em;
  width: 6.7ch;
  height: 0.7em;
  border-radius: 5px; 
  z-index: -1; 
}

<link rel = "preconnect" href = "https://fonts.googleapis.com">
<link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
<link href = "https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap" rel = "stylesheet">

<div class = "volunteer__title">    
    <div class = "volunteer__title--text" >volunteer</div>
</div>

Если вы хотите это в SASS, вы можете использовать его combi9ne в:

.volunteer__title {
  font-family: "Fredoka", sans-serif;
  font-size: 30px;
  position: relative;
  width: fit-content;
  font-weight: 500;
  &::after {
    content: "";
    display: block;
    background-color: #8FD192;
    border-radius: 5px;
    position: absolute;
    top: 0.4em;
    right: -0.1em;
    width: 6.7ch;
    height: 0.7em;
    border-radius: 5px; 
    z-index: -1; 
  }
}