如何在文本下創建點/小圓圈？

Question

如何在CSS文本下創建一個點，如下圖所示？

圖片必須總是在中間與字符串的任意長度。 也許我需要使用:before或:after？我試過了，但結果很糟糕。

Answer 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%; 
 
}

<div class="text">about</div>

Answer 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%; 

} 

堆棧寫了這個問題後，我想出了主意:)其作品excatly像我想:)