CSS带数字的圆形

Question

我需要制作像这样的项目符号：

我尝试想出任何方法来实现它，但我唯一能想到的是在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;
}

- KrMa

---

你已经尝试了什么？这应该是一个 ul 元素还是 ol 元素或其他什么东西？ - insertusernamehere

谢谢你的回答。我有点着急了。我编辑了我的问题并发布了我尝试过的代码，但它没有按照我想要的方式工作。这真的是我业余制作的.. :-/ 但是最好使用ul和li标签。 - KrMa

Answer 1

有很多方法可以实现这一点，这里是其中之一：

• 创建一个列表（ul或ol），并删除列表样式（list-style: none;）
• 初始化计数器：counter-reset: section;
• 在每个列表项上增加计数器，并使用伪元素（:before）打印它：content: counter(section); counter-increment: 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 计数器
• MDN：伪元素

演示示例

试用后购买

- insertusernamehere

---

看起来完美无缺。非常感谢 :) - KrMa

Answer 2

你可以按照以下方式进行操作：

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-radius: 50%;
    width: 25px;
    height: 25px;
    padding: 8px;
    background: #fff;
    border: 1px solid #000;
    color: #000;
    text-align: center;
    font-size: 20px;
}

- Ha Hoang