Html 将数据属性值作为CSS内容的通知徽章

我正在尝试用CSS/SCSS制作一个定制的通知徽章。我想像在html代码中一样从html属性（数据标签）插入内容，但是当我在CSS上调用它时，它什么也没有显示

HTML 或者，请看下面这把小提琴

---

提前感谢

问题是伪元素继承了图标的字体系列，我相信这是一种基于连字的图标字体

这就是为什么您可以在图标标记中键入文本“info”，并获得要显示的图标，而不是文本本身

由于数据徽章是一个数字，因此在Materialise字体系统中没有等效项，因此不会显示任何内容

如果将

字体系列

应用于伪元素

：：在

之后，数字将显示*

*这不是你所期望的，但我怀疑这是另一个问题

---

编辑：文本的位置已被固定…这是由于继承了60像素的线条高度。

问题是伪元素继承了图标的字体系列，我相信这是一种基于连字的图标字体

这就是为什么您可以在图标标记中键入文本“info”，并获得要显示的图标，而不是文本本身

由于数据徽章是一个数字，因此在Materialise字体系统中没有等效项，因此不会显示任何内容

如果将

字体系列

应用于伪元素

：：在

之后，数字将显示*

*这不是你所期望的，但我怀疑这是另一个问题

---

编辑：文本的位置已被修复…这是由于继承了60像素的行高。

您的菜单无法打开，没有任何javascript代码？@MortezaQorbanAlizade哪个菜单？我忘了删除手机上的隐藏类，但我编辑了小提琴。实际上，javascript/侧边栏菜单/下拉菜单与此无关。我只需要知道为什么是这个内容：attr（数据徽章）；无法在SCSSRelated上工作，部分原因是，您的菜单无法打开，没有任何javascript代码？@MortezaQorbanAlizade哪个菜单？我忘了删除手机上的隐藏类，但我编辑了小提琴。实际上，javascript/侧边栏菜单/下拉菜单与此无关。我只需要知道为什么是这个内容：attr（数据徽章）；不适用于SCSSRelated，部分原因是，我昨晚有办法解决这个问题，但这是另一个好方法。谢谢你的回答。我昨晚有办法解决这个问题，但这是另一个好方法。谢谢你的回答。

<ul id="nav-mobile" class="right hide-on-med-and-down">
    <li>
        <a href="#" class="nav-icons"><i class="material-icons" data-badge="4">info</i></a>
    </li>
    <li>
        <a href="#" class="nav-icons"><i class="material-icons">email</i></a>
    </li>
    <li>
        <a href="#" class="dropdown-button" data-activates="dropdown-user">
            <div class="chip">
                <img src="/images/personal.png" alt="Contact Person">
                                Jane Doe
                                <i class="material-icons right">arrow_drop_down</i>
            </div>
        </a>
    </li>
</ul>

a.nav-icons {
    max-height: 60px !important;
    i.material-icons {
    max-height: 60px;
    font-size: 2rem;
    line-height: 60px;
        &[data-badge] {
            content: attr(data-badge);
            position: relative;
            color: #fff;
                &::after {
                    content: attr(data-badge);
                    position: absolute;
                    background: red;
                    border-radius: 50%;
                    display: block;
                    padding: 0.3em;
                    color: black;
                    font-size: 12px;
                    max-height: 20px;
                    max-width: auto;
                    right: -10px;
                    top: 8px;
                  }
             }
        }
}