简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
前端 - 集思广益，如何用CSS实现数字上面有一个点
ringa_lee
ringa_lee 2017-04-17 11:47:08
0
2
636

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

ringa_lee
ringa_lee

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>
點贊 +0
新增回覆
黄舟
黄舟2017-04-17 11:49:08 1樓

简单点的你就用图片，然后匹配显示，该不会出现兼容等问题

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！