如何在文本下创建一个点/小圆圈？答案

【问题标题】：How to create a dot / small circle under text?如何在文本下创建一个点/小圆圈？
【发布时间】：2017-05-29 20:27:15
【问题描述】：

如下图所示，如何仅使用 CSS 在文本下创建一个点？

图片需要始终在中间，任意长度的字符串。可能我需要使用:before 或:after？我试过了，但结果很糟糕。

【问题讨论】：

你尝试过什么？向我们展示你的努力。
已经提出了想法并且它的工作正常:)

【解决方案1】：

可以使用转换后的伪元素来创建：

body { text-align: center; }

.text {
  display: inline-block;
  vertical-align: top;
  padding-bottom: 10px;
  position: relative;
  text-align: center;
  padding: 20px 10px;
  line-height: 24px;
  min-width: 100px;
  background: #333;
  font-size: 20px;
  color: #fff;
}

.text::before {
  transform: translateX(-50%);
  border-radius: 100%;
  position: absolute;
  background: blue;
  bottom: 10px;
  height: 8px;
  content: '';
  width: 8px;
  left: 50%;
}

&lt;div class="text"&gt;about&lt;/div&gt;

【讨论】：

【解决方案2】：

.char {
    display: inline-block;
    position: relative;
}
.char::before {
    content: '.';
    display: inline-block;

    position: absolute;
    bottom: -0.5em;
    left: 0;

    text-align: center;
    width: 100%;

}

在堆栈上写完这个问题后，我想出了一个主意:) 它的工作方式非常像我想要的 :)

【讨论】：