前端 - 集思广益,如何用CSS实现数字上面有一个点
ringa_lee
ringa_lee 2017-04-17 11:47:08
0
2
691

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

ringa_lee
ringa_lee

ringa_lee

reply all(2)
黄舟

The number that needs to be added is a separate element, and then used before or after pseudo-elements to achieve it.

<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>
黄舟

To make it simple, just use pictures and then match them to display. There will be no compatibility issues

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template