Не могу разобраться почему 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]

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

Answer 1

[Виктор Кожухарь]

Comments

[Ян Уланов]

В случае если две строки то before становится по середин, а не относительно первой строки

[Виктор Кожухарь]

Ян Уланов, Понял. Ответ изменил

[Ян Уланов]

Виктор Кожухарь, Да спасибо. И по поводу top: 0.7em; em откуда берется конкретно 0.7. Не знаком с ем-ми

[Ян Уланов]

Виктор Кожухарь, И вы поставили line-height: 1.4; А если у меня к примеру по макету нет line-height вообще

[Виктор Кожухарь]

Ян Уланов,
em - это база. Это вам знать обязательно, учить срочно. В современной вёрстке без относительных единиц никак. Кратко - это базовая относительная единица измерения, которая привязана к размеру текста (ширина буквы "m"). Таким образом, нам не важно, какого размера будет текст в пикселях.

Сначала мы задаём фиксированную высоту строки в line-height, чтобы потом точно знать, какого размера её половина.

Потом мы берем половину от этой высоты строки как раз в тех самых относительных единицах, и получаем центр строки.

Но расположить кружок прямо по центру строки нельзя, т.к. он ведь имеет свою высоту, т.е. уедет вниз. И чтобы это исправить, мы его двигаем вверх на половину своей собственной высоты при помощи transform: translateY(-50%)

[Виктор Кожухарь]

Ян Уланов, Если line-height нет, то добавьте его :)

[Ян Уланов]

Виктор Кожухарь, Да я понял, спасибо, но всё равно почему line-height: 1.4; если по макету стоит auto

[Виктор Кожухарь]

Ян Уланов, Auto означает, что line-height будет использоваться тот, который установлен выше по иерархии.
И если кто-то поменяет этот line-height где-то выше, то ваши кружки поедут в долгий путь, и ваш список станет выглядеть не так, как в макете. Поэтому, чтобы ничего не поехало, измерьте, какое точное значение line-height в вашем макете, и установите его жёстко в вашем списке.
Так вы формально выполните задачу заказчика, предоставив вёрстку в том виде, в каком был макет. И так она не сломается, если кто-то потом внесёт изменения выше по иерархии.

[Ян Уланов]

Виктор Кожухарь, То есть к примеру у меня line-height: 2; тогда top: 1em;?

[Виктор Кожухарь]

Ян Уланов, Совершенно верно. Я видел, что вы используете scss. В этом случае вы вообще там можете ввести переменную с высотой строки, а в top написать формулу, которая будет брать половину от этой переменной

[Ankhena]

Ян Уланов, используйте кастомные свойства и ничего никуда не уедет.

[Ivan Ustûžanin]

Виктор Кожухарь, поправочка em это размер шрифта в пикселях, а не ширина буквы m

[Виктор Кожухарь]

Ivan Ustûžanin, Вы правы. Просто исторически в печати брался именно размер буквы M, и это очень хорошо заходит новичкам, когда объясняешь, что это такое.