Как выровнять список ul относительно маркеров ("::before")?

Question

[Corepro]

Как выровнять список ul относительно маркеров ("::before") как на примере.

Comments

[Danny Arty]

Стили бы увидеть

[Corepro]

Danny Arty,

li::before {
    content: url(/wp-content/uploads/2022/05/Line-1.svg);
    margin-right: 14px;
    background: #fff;
    border-radius: 50%;
    padding: 5px 10px 5px 10px;
}

[Николай Угольников]

Corepro,

li {
    position: relative;
    padding: 0 0 0 14px;
}

li::before {
    content: ...;
    position: absolute;
    top: 0;
    left: 0;
    ...
}

[Danny Arty]

Corepro, а li? а еще лучше в песочницу. Я бы задал flex

[Ankhena]

Corepro, псевдоэлементы по умолчанию имеют display: inline, а значит у них не работают размеры и горизонтальные отступы. Вертикальные margin тоже не работают, а padding работает не так, как в основном ожидают люди.

Позиционировать их можно как inline-block, абсолютами, флексами или гридами.

При использовании флексов или гридов, нужно либо оборачивать контент в дополнительную обертку либо точно быть уверенным, что в тексте нет и не будет никаких тегов (типа br, span, strong и т.д.)

Удобнее манипулировать положением и размерами галки, если она будет фоном, а не написана в content.
А content оставить пустым. content: ""

---
Не очень четко описано, какого эффекта нужно добиться. Чтобы было как на скрине или чтобы текст шел по красной линии?

Answer 1

[Dymok]

li {
    display: block;
}