css实现文字下面有一个小圆点

在CSS中，实现文本下方带有小圆点的效果通常通过伪元素`::before`或`::after`配合`content`属性来实现。例如，如果你想在每个单词的结尾处添加一个小圆点，可以使用如下样式：

.text-with-dot {
  position: relative;
}

.text-with-dot::after {
  content: '\2022'; /* 小圆点字符 */
  position: absolute;
  bottom: 1px; /* 调整圆点距离底部的距离 */
  left: calc(100% - 2px); /* 计算文字宽度减去圆点宽度 */
  width: 2px; /* 圆点宽度 */
  height: 2px; /* 圆点高度 */
  background-color: #ccc; /* 圆点颜色，默认灰色 */
}

在这个例子中，`.text-with-dot`类的文本后方会自动插入一个空内容的小圆点。如果你有特定的需求，比如只在某些条件下添加圆点，你可以结合JavaScript或者特定的HTML结构来控制这个效果。