Как сделать такой сепаратор через псевдоэлементы?

Question

Я хочу реализовать данные сепараторы по бокам от иконки при помощи ::before и ::after. Таких сепараторов на макете множество и везде различные иконки. Также на разных разрешениях сепараторы растягиваются по всей ширине экрана устройства. Мой html код выглядит так:

<div class="separator separator--home-icon"></div>

В классе separator--home-icon (в каждом сепараторе будет разный класс) я вставляю background иконку, а в классах .separator::before и .separator::after - сепараторы по бокам. При чем я хочу "нарисовать" их через css, без использования svg или hr. Надеюсь вы мне поможете примерным кодом по реализации.

Связанный вопрос

Answer 1

Думаю, что так будет оптимально:

.separator {
  display: flex; align-items: center;
  justify-content: space-between;
}
.separator--home-icon {
  margin: 0 20px;
}
.separator::before,
.separator::after {
  content: ""; flex: 1;
  border: 1px solid #eebf3a;
}

<div class="separator"><div class="separator--home-icon">0</div></div>

БЛОГ НА HUSL

Как сделать такой сепаратор через псевдоэлементы?

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