如何在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

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;
 }

Answer 3

您可以假设您处于循环中并且可以访问数组的索引，从而创建一个带有数字的圆圈：

<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;
}