前端 - 集思广益,如何用CSS实现数字上面有一个点
本文介绍了前端 - 集思广益,如何用CSS实现数字上面有一个点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
就像简谱一样的那种。css上划线的那种,容易出现很多点或横线,并不适用
解决方案
需要加点的数字单独一个元素,然后用before或after伪元素实现。
<span>5</span>
<style>
span {
position: relative;
font-weight: 800;
font-size: 6rem;
}
span::before {
position: absolute;
content: '';
top: -0.5rem;
left: 50%;
margin-left: -0.5rem;
width: 1rem;
height: 1rem;
border-radius: 0.5rem;
background-color: #000;
}
</style>
这篇关于前端 - 集思广益,如何用CSS实现数字上面有一个点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文