Как стилизировать элементы списка

Liova Sup разместил пост 5 дней назад

Хочу что бы были не обычные черные кружечки, а синие, по вертикали проткнутые прямой линией, как такое можно сделать? Я видел как похожее делали с помощью before и after, но я не сильно разбираюсь, был бы благодарен примеру)

Евгений Сальник разместил пост 5 дней назад

Вот:

.list {
   
margin: 20px;
}

.
list li {
   
padding: 10px 0;
   
position: relative;
}

.
list li:before {
   
content: "";
   
display: block;
   
position: absolute;
   
width: 10px;
   
height: 10px;
   
background-color: blue;
   
border-radius: 50%;
   
top: 50%;
   
left: -15px;
   
transform: translateY(-50%);
}

.
list li:after {
   
content: "";
   
display: block;
   
position: absolute;
   
left: -11px;
   
top: 0;
   
width: 1px;
   
height: 100%;
   
background-color: blue;
}

 

<ul class="list">
    <li>
Item 1</li>
    <li>
Item 2</li>
    <li>
Item 3</li>
</ul>

 

 

Close