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

Question

我正在尝试使用 CSS/SCSS 制作自定义通知徽章。我想像在 HTML 代码中一样从 html 属性（data-badge）插入内容，但是当我在 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;
                  }
             }
        }
}

或者，请看下面这个小提琴。

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

提前谢谢你

Answer 1

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

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

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

如果您将 font-family（例如 Verdana）应用于伪元素 ::after，则会显示数字*。

JSfiddle Demo

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

编辑：文本的位置已修复...这是由于也继承了 60px 行高。