Не могу разобраться почему before не становится по центру li (Оставил код ниже чтобы более понятно)?

Question

[Ян Уланов]

<ul class="list2">
                <li class="list2__item2">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure quasi aut
                </li>
                <li class="list2__item2">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure quasi aut
                </li>
                <li class="list2__item2">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure quasi aut
                </li>
                <li class="list2__item2">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure quasi aut
                </li>
            </ul>

.list2 {
    display: flex;
    flex-direction: column;

    // .list2__item2
    &__item2 {
        position: relative;
        padding: 0px 0px 0px 20px;
        &::before {
            content: "";
            border-radius: 50%;
            background-color: red;
            width: 8px;
            height: 8px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    }
}

Конкретно не могу понять почему красный пункт не становится по центру .list2__item2. Что не так делаю?

Comments

[Ян Уланов]

Точнее будет правильнее спросить как его поставить по центру не используя в top пиксели

[Ankhena]

Ян Уланов, Дичь какая-то.

Зачем вы приплели сюда тег FLEXBOX, если ставите псевдо абсолютом?

Конкретно не могу понять почему красный пункт не становится по центру .list2__item2. Что не так делаю?

Потому что вы ничего не написали для того, чтобы он встал по центру.
Если вам нужна середина по вертикали, то зачем пишете значение в пикселях? Ставьте 50% и обратный трансформ -50%.

top: 50%;
transform: translate: -50%;

Ну или используйте тот самый флекс или грид и их стандартные свойства.
Также хочу напомнить о стандартном инлайн-блоке и vertical-align.

p.s. Вертикальное центрирование будет выглядеть очень странно, если строк будет больше, чем одна.

[Ян Уланов]

Ankhena, Так мне нужна середина по горизонтали относительно текста (в случае если строк больше, чтобы before был относительно первой строки).

[Ivan Ustûžanin]

Ян Уланов, так не используйте пиксели, а используйте em-ы или lh-и

[Ankhena]

Ян Уланов,

Так мне нужна середина по горизонтали относительно текста

Может, всё таки речь про вертикаль?
Но вы супер формулируете вопросы. Ведь в исходном ничего нет про середину первой строки. Имеет смысл научится это делать, чтобы получать ответы быстрее.

Если середина первой строки, то это шрифт (1em), умноженный на line-height. Плюс учитывайте отступы, если они отличны от нуля.

Очень удобно использовать кастомные свойства для line-height, чтобы не менять два раза, если придется корректировать.

[Ян Уланов]

Ankhena,
Вот что вышло с использованием
top: 50%;
transform: translate: -50%;

[Ankhena]

Ян Уланов, ну логично.
Про высоту строки написала выше.