html - 具有数据属性值作为 CSS 内容的通知徽章

Question

我正在尝试使用 CSS/SCSS 制作自定义通知徽章。我想像在 HTML 代码中一样从 html 属性(数据徽章)插入内容，但是当我在 CSS 上调用它时，它什么也没显示。

HTML

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

SCSS

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;
                  }
             }
        }
}

或者，请参阅下面的 fiddle 。

https://jsfiddle.net/5gxudefb/3/

提前致谢

Answer 1

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

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

由于 data-badge 是一个数字，它在 Materialise 字体系统中没有对应的数字，因此不会显示任何内容。

如果您将 font-family(例如 Verdana)应用到伪元素 ::after，数字会显示*。

JSfiddle Demo

^{*不是你期望的地方，但我怀疑那是另一个问题}

编辑:文本的位置已修复...这是因为 60 像素的行高也被继承了。