Jquery 如何在菜单上显示徽章

我在一些网站上看到他们有一个菜单，他们的菜单上有一个显示数字的小徽章。有人知道这是怎么表现出来的吗。我正在使用mvc和razor语法开发一个web应用程序。例如，现在我有一个菜单“Email”，如果收到任何新的Email，那么菜单项应该显示“Email 1”。此处“1”应位于电子邮件菜单的右上角。我很想知道是否有人做了这件事，并能分享一些想法

我个人使用HTML元素的

data

属性，然后使用

content:attr（data）

生成一个仅CSS的徽章，如下所示：

下面是一个例子：

.badged:：after{
内容：attr（数据计数）；/*重要部分*/
位置：相对位置；
顶部：-10px；
右：0px；
显示：内联块；
最小宽度：16px；
高度：16px；
文本对齐：居中；
颜色：白色；
边框：1px实心暗色；
边界半径：10px；
背景：红色；
}

我有徽章你的意思是这样的：

演示：

它基本上是一个div，具有巨大的边界半径，但宽度和高度都很小，这使得它看起来像一个圆，并且它是绝对定位的，在我的例子中，但通常是参照父元素，并通过javascript显示或隐藏

.e {
    width: 90px; height: 40px; background-color: rgb(50, 121, 128); line-height: 40px; text-align: center; color: white;
    margin: auto; position: absolute; top: 0;bottom: 0;left: 0;right: 0;
}
.alert {
    position: absolute; background-color: rgb(0, 204, 255); border-radius: 1000px; width: 30px; height: 30px; text-align: center; line-height: 30px; top: 28px; left: 65px;
    display: none;
}
body,html {
    font-family: 'Open Sans';
    height: 100%; background-color: rgb(45, 38, 61);
}