Как привязать декоративны элемент с помощью before?

Question

Подскажите, пожалуйста, как реализовать такой декоративный элемент?

Пробую добавить его через before, но почему-то не выходит. Скажите пожалуйста, в чём заключается проблема.

.test h2 {
  position: relative;
  font-size: 37px;
}

.test h2::before {
  content: '';
  width: 200px;
  height: 10px;
  background: red;
}

<div class="test">
  <h2>Тест</h2>
</div>

Answer 1

Чтобы этот пустой псевдоэлемент стал видимым, ему необходимо задать либо display:block, либо position:absolute.

В варианте без абсолютного позиционирования лучше заменить ::before на ::after

.test h2 {
  position: relative;
  font-size: 37px;
}

.test h2::after {
  content: '';
  width: 200px;
  height: 10px;
  background: red;
  display:block;
}

<div class="test">
  <h2>Тест</h2>
</div>

Answer 2

.test {
  position: relative;
  font-size: 37px;
}

.test h2::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 5px;
  background: red;
  bottom: -5px;
}

<div class="test">
  <h2>Тест</h2>
</div>

БЛОГ НА HUSL

Как привязать декоративны элемент с помощью before?

Ответы (2 шт):