如何创建一个简单的CSS徽章系统

Question

我需要一个简单的徽章系统，可以应用于多种类型的html元素。

类似于您在手机上的消息应用中找到的内容。

像这样;

Answer 1

为了别人的利益回答我自己的问题。

最近我创建了一个使用css的徽章系统，可以应用于任何html元素。

我希望这可以帮助其他寻找类似内容的人。

这是使用在host元素之后应用的css伪元素完成的。只需添加带有值的badge属性即可将徽章应用于任何元素。

如果徽章的默认位置/样式不合适，某些主机元素可能需要添加替换。

伪元素的content继承自属性badge。

如果没有给出值，0或negative值，则默认情况下不会显示徽章。如果您需要显示带有0或negative值的徽章，请使用css覆盖或删除css文件中的规则。

覆盖示例;

.my-unusual-element[badge="0"]:after {
    display: initial;
}

这是一个仅限CSS的解决方案，旨在成为轻量级徽章系统。

我在这里发布了一个小提琴演示。

＆＃13;

＆＃13;

[badge]:after {
      background: red;
    border-radius: 30px;
    color: #fff;
    content: attr(badge);
    font-size: 11px;
    margin-top: -10px;
    min-width: 20px;
    padding: 2px;
    position: absolute;
    text-align: center;
}

[badge^="-"]:after,
[badge="0"]:after,
[badge=""]:after {
   display: none;
}

＆＃13;

<span badge="">Empty string</span>
<br>
<br>
<span badge="-1">-1</span>
<br>
<br>
<span badge="0">0</span>
<br>
<br>
<span badge="1">1</span>

＆＃13;

＆＃13;

＆＃13;