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

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

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;
    ...
}

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

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

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

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

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

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