css中数字怎么加空心圆

CSS 是网页设计中非常重要的一部分，不仅可以改变网页的字体、颜色、布局等方面，还能加入各种酷炫的特效，让网页看起来更加生动有趣。其中，数字加上空心圆是一个比较小众的需求，本文将为大家介绍如何使用 CSS 实现数字空心圆的效果。
首先，在 HTML 中需要加入一个需要加上空心圆的数字，如下所示：

 <p>1</p> 

接着，在 CSS 中，我们可以使用伪元素 `::before` 或 `::after` 为数字添加一个空心圆。伪元素是一个虚拟的元素，不需要任何 HTML 代码即可通过 CSS 来创建，所以可以方便地包含一些额外的内容。

 <style>
    p::before {
      content: ';
      display: inline-block;
      width: 10px;
      height: 10px;
      border: 1px solid #000;
      border-radius: 50%;
      margin-right: 5px;
    }
  </style> 

我们先选择 `p` 标签，再使用 `::before` 伪元素，其中 `content: '` 表示内容为空，在这里相当于一个占位符， `display: inline-block` 表示将这个伪元素设置为行内块元素， `width` 和 `height` 分别表示宽度和高度， `border: 1px solid #000` 则是设置边框颜色和宽度， #000 表示黑色，`border-radius: 50%` 将边框设置为圆角， `margin-right: 5px` 表示在数字和空心圆之间留有 5 像素的间距。
这样设置后，数字 1 就会在前面加上一个空心圆了。如果需要调整空心圆的大小、颜色等属性，只需要改变对应的数值即可。同样地，你也可以将 `::before` 的样式改为 `::after`，在数字后面添加空心圆。
以上就是如何使用 CSS 加入数字空心圆的方法，如果你想方便地将这个效果应用于多个数字，可以将样式代码封装成一个类或选择器，然后在 HTML 代码中添加对应的类名即可。