CSS 使用CSS为每个字符下方添加一个小圆点

在本文中，我们将介绍如何使用CSS为每个字符下方添加一个小圆点的方法。这种效果可以为网页文本增加一些装饰性和吸引力，特别是在标题和重要的文本部分。

阅读更多：CSS 教程

使用伪元素实现

要实现这个效果，我们可以使用伪元素(::after或::before)和一些CSS样式来生成一个小圆点，并将其定位到每个字符的下方。

span {
  position: relative;
}

span::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: black;
  border-radius: 50%;
}

在上面的示例中，我们首先将每个字符包装在一个span标签中，并将其position属性设置为relative，以便在伪元素定位时可以相对于其定位。

然后，我们使用span::after来创建一个::after伪元素，并使用content属性将其内容设置为空。我们将其position属性设置为absolute，以便可以根据其父元素的位置进行定位。

通过设置bottom属性为负值，将小圆点定位到每个字符的下方。通过设置left属性为0，保证小圆点在每个字符的最左边。

接着，我们设置小圆点的大小、颜色和形状。在示例中，我们将宽度和高度都设置为4个像素，并将背景颜色设置为黑色。我们还使用border-radius属性将其形状设置为圆形。

使用这些CSS样式，我们就可以为每个字符添加一个小圆点了。

示例

接下来，我们将通过一个示例来演示如何使用CSS为每个字符下方添加小圆点。

<!DOCTYPE html>
<html>
<head>
<style>
span {
  position: relative;
}

span::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: black;
  border-radius: 50%;
}
</style>
</head>
<body>
<h1><span>C</span><span>S</span><span>S</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis, augue eget dapibus ultrices, neque massa sollicitudin nisi, vitae consectetur mi arcu id ipsum. Fusce feugiat malesuada ipsum, at condimentum orci iaculis in. Donec a efficitur tellus, nec vehicula leo. Integer sit amet dignissim lacus. Sed tincidunt urna a posuere commodo. Etiam vitae tortor sed augue porttitor condimentum et a neque. Phasellus tincidunt mollis justo quis finibus. Duis finibus nibh quis suscipit vehicula.</p>
</body>
</html>

在上面的示例中，我们将<h1>标签中的每个字符都放置在一个<span>标签中，并应用了我们之前所示的CSS样式。

运行这段代码，你将会看到每个字符下方都有一个小圆点。