Почему не работает сепаратор через псевдоэлемент?

Question

[kuramaa922]

Криво отображается сепаратор через before,сбивается вся сетка в блоке

https://codepen.io/kuramaa922/pen/oNqWRyw

Comments

[Ankhena]

Он работает.
Так, как вы ему сказали.
Сделали псевдо блочным => всё, что после него перенеслось на новую строку.

Замените на инлайн-блок или задайте флекс или грид родителю. Либо прибейте абсолютом.

[kuramaa922]

Ankhena, благодарю за развёрнутый ответ

[Ankhena]

kuramaa922, для инлайн-блоков не забывайте указывать vertical-align в явном виде, чтобы не было сюрпризов и потому что по умолчанию он baseline

[kuramaa922]

Ankhena, Спасибо за информацию

Answer 1

[ehoboli]

для этого используется display: inline-block;

.header__item:nth-last-child(2)::before {
    content: "";
    display: inline-block;
    width: 2px;
    height: 40px;
    margin-right: 16px;
    background-color: #000;
    border-radius: 1px;
}

Comments

[kuramaa922]

Спасибо за помощь