Стилизация списка li?

Question

[Corepro]

Подскажите как мне стилизовать список как на примере ?

Comments

[Антон Литвиненко]

убираем точки у ли. Паддинг слева и позишн релейтив. бифор - делаем абсолютом белый кружок. афтер - делаем прямоугольник с двумя смежными бордерами левым и нижним и поворачиваем его на -45градусов абсолютом внутри кружка. профит

Answer 1

[Yuriy Lyadov]

Как то так:

*{
    padding: 0;
    margin: 0;    
}


ol{
    list-style: none;
}
ol > li{
    padding-left: 20px;
    position: relative;
    margin: 10px;
}
ol > li:before{
    content: '✔';
    position: absolute; top: 0; left: 0;
    color: yellow;
}

<ol>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
</ol>

Comments

[Corepro]

Так и я пониманию что можно, я не понимаю как вставить ровную галочку как на примере и сделать background белыйл.

[Yuriy Lyadov]

Corepro,
https://fontawesome.com/icons/
https://fontawesome.ru/all-icons/

Вот популярные сайты с font ico, установи шрифт, css с сайта и в там вроде есть возможность иконку в css вставить

[Ankhena]

Corepro,

я не понимаю как вставить ровную галочку

Ровная галочка вынимается из вашего макета в формате SVG и вставляется фоном в псевдоэлемент.

сделать background белыйл.

эммм... так и сделать
background-color: white
для того же псевдоэлемента.

Если совсем беда, экспортируйте из макета вместе с кругляхом.

Answer 2

[Арман Джусупов]

Иконка фоном для тега li, потом паддингом отодвинуть вправо
Что-то типа такого https://codepen.io/jusaa11/pen/NWydzxX

Answer 3

[zusik]

Можно с помощью свойства list-style-image, значением которого является ссылка на изображение:
list-style-image: url(“/…/…png”);