Дошел до того, что это можно сделать при помощи svg. Подскажите как сверстать такой элементы, или хотя бы как правильно гуглить про такой элемент
1 ответ
Для этого есть очень много способов. Но я вам рекомендую почитать про псевдоэлементы в css. Такое обычно делают с помощью них.
Для достижении своего результата вы можете взять за основу вот такую разметку. Думаю вы сможете добиться нужного результата если немного покурите стили.
ul li {
padding: 6px 0;
}
li {
list-style-type: none; /* Убираем маркеры у списка */
}
ul:before {
content: '';
color: #5d31c4; /* Выбираем цвет */
position: absolute; /* позиционироваем */
border-left: 2px solid; /* Даем рамку слева*/
margin-left: 11px; /* Оступ слева до булетов */
width: 1px; /* ширина */
height: 90px; /* высота */
}
li:before {
content: '\2022'; /* Берем точку */
margin-right: 15px; /* Даем оступ от текста */
color: #5d31c4; /* Выбираем цвет */
border: 3px solid; /* Делаем рамку */
border-radius: 100px; /* Скругляем рамку */
padding: 0 6px; /* даем внутренние оступы по бокам */
}
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Очень важная инфа</li>
</ul>