pozycjonowanie pseudoelementu względem głównego elementu

Question

Witajcie. Mam taki oto problem. Chcę strzorzyć nagłówek z pseudoelmentem, który byłby wypozycjonowany względem głównego elementu w tej sposób, że zawsze znajdowałby się pod nim, z lewej strony bez względu na to jak długi jest ten nagłówek i jak jest wypozycjonowany. Napisałem coś takiego:

h2{
//...
  &.header{
    position: relative;
    display: block;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 200px;
    &:after{
      content: url('../img/separate.svg');
      display: block;
      position: absolute;
      top: 30px;
      transform: translateX(-10%);
    }
  }
}

 Te style działają, ale problematyczne jest ustawianie szerokości tego elementu. Musiałbym oddzielnie ustawiać szerokości dla wszystkich nagłówków, co wydaje się dosyć kiepskim pomysłem, a jeśli tego nie zrobię, to jest problem ze skalowaniem  strony.

Comments

Może zastosuj do tego: display: flex?

---

Ale wtedy musiałbym zastosować jakiś kontener na nagłówek