如何在CSS中实现列表项目符号

Question

我对列表项目有以下项目符号。我如何在CSS中实现这些项目符号？

见图片

Answer 1

从this答案，我编辑它，所以它是你想要的东西

CSS

body { 
    counter-reset: item; 
} 
ol { 
    list-style: none; 
} 
li { 
    counter-increment: item; 
    margin-bottom: 5px; 
} 
li:before { 
    margin-right: 10px; 
    content: counter(item); 
    border-radius: 100%; 
    border:2px solid #29465F; 
    color:#29465F; 
    font-weight:700; 
    width: 1.2em; 
    text-align: center; 
    display: inline-block; 
} 

HTML

<ol> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
</ol> 

Here's小提琴

Answer 2

可以使用假设你是在一个循环中，并有机会获得数组的索引作圆圈与一些中它：

<li> 
    <span class="list-item-number">{{i+1}}</span> 
    <span class="lite-item-value">{{item.name}}</li> 
</li> 

.list-item-number { 
    border-radius: 100rem; 
    width: 1rem; 
    border: .2rem solid blue; 
    background: white; 
    text-align: center; 
} 

Answer 3

https://jsfiddle.net/RajReddy/k36qjnq4/这里是工作提琴。

和CSS样式

ol { 
    list-style: none; 
} 
li { 
    counter-increment: item; 
    margin-bottom: 5px; 
} 
li:before { 
    margin-right: 5px; 
    content: counter(item); 
    border-radius: 100%; 
    border:1px solid; 
    width: 20px; 
    text-align: center; 
    display: inline-block; 
}