我需要制作这样的子弹点：
我试着想办法怎么做,但我唯一能想到的就是在photoshop中制作它,并制作一个img src标签.最好的是它是ul和li标签.
有人知道怎么做吗？
我尝试过类似的东西,但它无法正常工作：
JSFIDDLE
HTML
<a href="abecadlo/"><div class="galeria">1</div></a> <a href="abecadlo/"><div class="galeria">2</div></a> <a href="abecadlo/"><div class="galeria">3</div></a>
CSS
.galeria{
border-style: solid;
border-width: 1px;
border-color: black;
width: 200px;
height: 200px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
margin-right: 2%;
display: inline;
}
解决方法
有很多方法可以实现这一点.这是一个：
>创建一个列表(ul或ol)并删除列表样式(list-style：none;)
>初始化计数器：counter-reset：section;
>增加每个列表项的计数器并使用伪元素(：before)打印：content：counter(section);反增量：部分;
>像你想要的那样设置伪元素(：before)
ul {
counter-reset: section;
list-style: none;
}
li {
margin: 0 0 10px 0;
line-height: 40px;
}
li:before {
content: counter(section);
counter-increment: section;
display: inline-block;
width: 40px;
height: 40px;
margin: 0 20px 0 0;
border: 1px solid #ccc;
border-radius: 100%;
text-align: center;
}
<ul> <li>First item</li> <li>Second item</li> </ul>
进一步阅读
> MDN: CSS counters
> MDN: Pseudo-elements
演示
