jquery - 如何在菜单上显示徽章

Question

我在一些网站上看到他们有一个菜单，并且有一个小徽章，在菜单上显示数字。有谁知道这是如何显示的。我正在使用 mvc 和 razor 语法开发一个 Web 应用程序。例如，现在我有一个菜单“电子邮件”，如果收到任何新电子邮件，则菜单项应显示“电子邮件 1”。这里“1”应该位于电子邮件菜单的右上角。我很想知道是否有人这样做过并且可以分享一些想法。

Answer 1

我个人使用 HTML 元素的 data 属性，然后使用 content:attr(data) 生成一个仅 CSS 徽章，如下所示:

这是一个例子:

.badged::after{
    content:attr(data-count); /* Important part */

    position:relative;    
    top:-10px;
    right:0px;

    display:inline-block;
    min-width:16px;
    height:16px;

    text-align:center;
    color: white;
    
    border:1px solid darkred;
    border-radius:10px;
    background: red;
}

<span class="badged" data-count="1">I'm badged!</span>