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

Question

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

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

像这样；

Answer 1

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

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

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

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

如果徽章的默认 position/style 不合适，一些宿主元素可能需要添加覆盖。

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

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

覆盖示例；

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

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

我在这里发布了一个 fiddle 用于演示。

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

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

How to create a simple CSS badge system

css

badge