如何在文本下创建一个点/小圆圈? [英] How to create a dot / small circle under text?
本文介绍了如何在文本下创建一个点/小圆圈?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何仅使用CSS在文本下打点,如下图所示?
How can I make a dot under text using only CSS as shown in below picture?
图片必须始终位于中间,且字符串长度不限。
可能需要使用:before
或:after
吗?我尝试过,但是结果很糟糕。
The picture needs to be always in middle with any length of string.
Probably I need to use :before
OR :after
? I've tried but result was awful.
推荐答案
可以使用转换后的伪元素来创建它:
A transformed pseudo element can be used to create this:
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>
这篇关于如何在文本下创建一个点/小圆圈?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文