CSS 在图标上显示通知数量

在本文中，我们将介绍如何使用CSS在图标上显示通知数量的方法。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

背景

在现代的用户界面设计中，图标通常用来表示不同的功能或状态。有时候我们需要在图标上显示一个数字，以表明某种通知的数量，比如未读消息数量、新邮件数量等。使用CSS可以很容易地实现这个效果。

使用伪元素 ::after

要在图标上显示通知数量，我们可以使用伪元素 ::after。通过在图标所在元素的CSS样式中添加伪元素，我们能够在图标的右上角或左上角显示一个小圆圈，并在其中显示通知数量。

下面是一个示例，展示了如何在一个带有图标和通知数量的按钮上使用伪元素 ::after：

<button class="notification-button">
  <span class="icon"> </span>
</button>

.notification-button {
  position: relative;
  display: inline-block;
}

.notification-button::after {
  content: attr(data-notification);  /* 使用伪元素的content属性获取通知数量 */
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background-color: red;
  color: white;
  border-radius: 50%;
  font-size: 12px;
}

在这个示例中，通过 ::after 伪元素，我们可以在按钮的右上角显示一个红色的圆圈，并通过 data-notification 属性获取通知数量。

动态更新通知数量

要动态更新通知数量，我们可以使用JavaScript来更新 data-notification 属性的值。下面是一个简单的示例，展示了如何通过JavaScript更新通知数量：

var notificationCount = 10;  // 假设有10个通知

var notificationButton = document.querySelector('.notification-button');
notificationButton.setAttribute('data-notification', notificationCount);

在这个示例中，我们假设有10个通知，并将通知数量设置为 data-notification 属性的值。

自定义样式

除了上述示例中的基本样式外，我们还可以自定义通知数量的样式以适应不同的设计需求。以下是一些常用的自定义样式示例：

.notification-button::after {
  background-color: red;   /* 圆圈的背景颜色 */
  color: white;   /* 文字的颜色 */
  font-size: 12px;   /* 字体大小 */
  padding: 3px;   /* 圆圈与文字之间的间距 */
}

.notification-button::after {
  background-color: #ff8800;
  color: white;
  font-size: 14px;
  padding: 5px;
}

.notification-button::after {
  background-color: #00bfff;
  color: black;
  font-size: 16px;
  padding: 6px;
}

通过更改 background-color、color、font-size 和 padding 的值，我们可以自由地调整通知数量的样式。