如何创建一个简单的 CSS 徽章系统 [关闭]答案

【问题标题】：How to create a simple CSS badge system [closed]如何创建一个简单的 CSS 徽章系统 [关闭]
【发布时间】：2018-03-02 15:51:19
【问题描述】：

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

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

类似的东西；

【问题讨论】：

等等...你创建一个问题只是为了回答它？
我自己在寻找解决方案时找不到简单的解决方案。一旦我制定了解决方案，我认为值得分享以防其他人正在寻找类似的东西。另外我希望其他人可以改进我的答案/解决方案:)
真的吗？ this、this、this、this 和 this 问题呢？那里有很多重复项。
@Terry，如果这被标记为重复而不是离题就好了。我实际上喜欢这个答案，但它属于另一个问题而不是这个新问题。我想问题需要编辑才能从题外话升级为重复？

标签： css badge

【解决方案1】：

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

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

我希望这对正在寻找类似内容的其他人有所帮助。

这是通过在宿主元素之后应用 css 伪元素来完成的。只需添加带有值的badge 属性，就可以将徽章应用于任何元素。

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

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

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

覆盖示例；

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

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

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

[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;
}

<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>

【讨论】：

如果你使用badge作为数据属性，你不应该使用data-badge吗？
我想是好的做法，但不管data前缀如何，它都可以工作。
是的，我的意思只是作为“最佳实践”之类的东西。无论如何，解决方案非常简洁。干得好！