CSS 如何增加 li 中小圆点的大小

在本文中，我们将介绍如何使用 CSS 来增加列表元素中小圆点的大小。

阅读更多：CSS 教程

1. 使用 ::before 伪元素

我们可以使用 ::before 伪元素来增加 li 元素中小圆点的大小。下面是一种实现方式：

li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: black;
  margin-right: 5px;
}

这段 CSS 代码中，我们使用 ::before 为每个 li 元素插入一个伪元素，并设置其内容为空。然后，我们将这个伪元素设为内联块级元素，设置其宽度和高度为 10px，并给其添加了圆角边框，使其形成一个小圆点。最后，通过设置 margin-right 属性来控制圆点和文本之间的间距。

2. 使用 list-style-type 属性

除了使用 ::before 伪元素，我们还可以使用 list-style-type 属性来设置小圆点的样式。下面是一种实现方式：

li {
  list-style-type: disc;
  font-size: 20px;
}

这段 CSS 代码中，我们直接给 li 元素设置了 list-style-type 属性为 “disc”，这样就可以使用默认的小圆点作为列表标记。同时，我们还可以通过设置 font-size 属性来调整小圆点的大小。

3. 使用 font-awesome 图标库

如果我们想要使用更多样式的小圆点，可以考虑使用 font-awesome 图标库。下面是一种实现方式：

首先，在 HTML 文件中引入 font-awesome 的 CSS 文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

然后，在 CSS 文件中设置 li 元素的内容为相应的图标：

li::before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  margin-right: 5px;
}

这段 CSS 代码中，我们通过设置 font-family 属性为 “Font Awesome 5 Free” 来引用 font-awesome 图标库中的图标。然后，我们使用 content 属性来设置图标的 Unicode 值，这里使用的是小圆点的 Unicode 值。最后，通过设置 margin-right 属性来控制图标和文本之间的间距。