如何在有序<li>元素周围创建圆

Question

好吧，这确实是一个我无法解决的简单问题。我有一个看起来像这样的html文件：

<ol>
  <li> item 1 </li>
  <li> item 2 </li>
  <li> item 3 </li>
</ol>

附带的CSS看起来像这样：

ol {
  list-style: none;
  counter-reset: li-counter;
}
ol li {
  counter-increment: li-counter;
}
ol li::before {
  content: counter(li-counter);
  color: #59cbbe;
  font-weight: bold;
  width: 20px;
  height: 20px;

  border: 2px solid black;
  border-radius: 50px;

  padding: 4px;
  margin: 10px;
}

这是codepen

我曾尝试以下和修改这个例子，但没能得到它。所以我也尝试了这个。当您查看电笔时，我遇到的主要问题是圆圈不是圆圈，它们始终是我使用的椭圆形和椭圆形天气，30px或者50%缺少某些东西。抱歉，这是一个非常简单的答案，但是，我对CSS的了解不是那么好。

Answer 1

好吧，你走在正确的轨道上。您只需要添加display: inline-block到伪元素，即可width:20px; height:20px生效。因此，伪元素将是正方形+圆形边界=圆形。

内联块：

将元素显示为内联级块容器。元素本身被格式化为嵌入式元素，但是您可以应用高度和宽度值

如您在这里阅读的一样，伪元素的默认显示伪:before元素具有display:inline（就像span一样）不接受宽度和高度

来自w3schools：

将元素显示为嵌入式元素（如<span>）。任何高度和宽度属性均无效

ol {
  list-style: none;
  counter-reset: li-counter;
}

ol li {
  counter-increment: li-counter;
}

ol li::before {
  content: counter(li-counter);
  color: #59cbbe;
  font-weight: bold;
  width: 20px;
  height: 20px;

  border: 2px solid black;
  border-radius: 50px;
  display: inline-block;
  text-align: center;
  padding: 4px;
  margin: 10px;
}

<ol>
  <li> item 1 </li>
  <li> item 2 </li>
  <li> item 3 </li>
</ol>