css中实心点如何写成空心点

在CSS中，我们通常使用点来作为半角的实心点，但是当我们希望使用空心点时，该怎么办呢？其实很简单，只需要使用CSS中的伪元素即可。

/* 定义字体和字号 */
.my-list {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

/* 使用伪元素来定义空心点 */
.my-list li:before {
  content: "2022"; /* 使用unicode编码来表示圆点 */
  color: #000; /* 字体颜色与原先实心点相同 */
  margin-right: 5px; /* 空心点与文字之间的间距 */
}

/* 取消原先实心点的显示 */
.my-list li {
  list-style-type: none;
  margin-left: 0; /* 取消默认的列表缩进 */
  padding-left: 15px; /* 空心点的大小 */
} 

在上述代码中，我们首先定义了一个列表样式，它的字体和字号分别为Arial和12px。然后，我们使用伪元素:before来定义空心点，其中通过content属性来设置圆点的unicode编码，并指定了字体颜色和圆点与文字之间的间距。接着，我们取消了原先实心点的显示，将列表标记样式设置为none，并调整了空心点的大小。

因此，使用CSS中的伪元素即可实现将实心点改为空心点，而且操作非常简单，只需要稍做修改即可根据需要调整空心点的大小和样式。大家不妨试着在自己的网页中使用空心点来展示列表内容，看看会为页面带来怎样的效果和体验。