Как сдвинуть псевдоэлемент ниже?

Question

[webjun]

Как добавить эти иконки перед текстом как на макете ?



Я сделал через before но выходит коряво

Comments

[Ankhena]

Если подписи в одну строку, то проще всего добавить для псевдо

display: inline-block;
vertical-align: middle;

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

Сами иконки выгоднее вставлять в background, а content оставлять пустым. Так проще управлять размером.

[webjun]

Ankhena, Спасибо!

[Александр]

Иконки в виде картинок или шрифта?

[Александр]

Желательно напишите код

[webjun]

https://codepen.io/IvaLu/pen/xxYdEEp

Answer 1

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

p {
    position: relative;
}

p::before {
    content: "";
    position: absolute;
    top:  50%;
    left: -20px;
    transform: translateY(-50%);
    background: url();
    width: ... px;
    height: ... px;