有很多方法可以實現這一點.這是一個：

>創建一個列表(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;

}

• First item
• Second item

進一步閱讀

演示

總結

以上是生活随笔為你收集整理的html带圈的数字号码,html – 带有数字的CSS圈子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。