前端 - 集思广益，如何用CSS实现数字上面有一个点-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

前端 - 集思广益，如何用CSS实现数字上面有一个点

ringa_lee 2017-04-17 11:47:08

[CSS3讨论组]

804

就像简谱一样的那种。css上划线的那种，容易出现很多点或横线，并不适用

ringa_lee

全部回复(2)

黄舟2017-04-17 11:49:08 2楼

需要加点的数字单独一个元素，然后用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>