Как задать высоту псевдоэлемента :before равную высоте элемента, к которому он добавляется?

Question

[Влад]

Необходимо сделать в тэге h1 с псевдоэлементами вёрстку по аналогии с табличной:

<table>
 <tr>
   <td>:before</td>
  <td>Здесь h1</td>
  <td>:after</td>
 </tr>
</table>

Т.е. чтобы все элементы имели равную резиновую высоту.
Чтобы при ресайзинге ширины экрана и автоматическом переносе слов основного элемента h1 на новую строку, высота его псевдоэлементов также растягивалась по высоте.

Answer 1

[origami1024]

Просто задай элементу display: flex;

Вот пример
https://codepen.io/origami1024/pen/qBBELrr

Comments

[Ankhena]

Исправьте: псевдоэлементы пишутся с ::, т.e. ::before и ::after.
И им (псевдо) не нужен flex, если не нужно выравнивать контент по высоте.

[origami1024]

Ankhena, просто напишите ответ получше.
Я никогда не пишу ::, и не вижу что это добавляет.

Для самих псевд display: flex действительно не нужен, он туда закрался при экспериментации незаметно для меня, убрал его, чтобы было всё более понятно.

Успехов и удачи, с уважением Оригами1024