html - 带有数字的 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;
}

Answer 1

有很多方法可以实现这一点。这是一个:

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

演示

Try before buy