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

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

这就是为什么你可以输入文字＆＃34; info＆＃34;在图标标签中，显示一个图标而不是文本本身。

由于数据标记是一个数字，因此它在Materialise字体系统中没有等效字符，因此不显示任何内容。

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

JSfiddle Demo

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

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

通知将数据属性值标记为CSS内容

HTML

SCSS

1 个答案: