[分享]css 未读消息数

在网站或应用程序中展示未读消息数量是一个很常见的需求，CSS有很多方法可以实现这一功能。其中最常见的方法是使用伪元素来插入未读消息数量。我们可以在包含消息的元素中添加一个计数器属性（counter），...

在网站或应用程序中展示未读消息数量是一个很常见的需求，CSS有很多方法可以实现这一功能。

其中最常见的方法是使用伪元素来插入未读消息数量。我们可以在包含消息的元素中添加一个计数器属性（counter），然后使用伪元素在元素中插入计数器的值。如下所示：

.message-container {
position: relative;
}
.message-container::before {
content: counter(unread-messages);
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
background-color: red;
color: white;
text-align: center;
border-radius: 50%;
line-height: 20px;
font-size: 12px;
}
.message-container::after {
content: "未读消息";
position: absolute;
top: -32px;
right: -10px;
color: black;
font-size: 12px;
}

在这个例子中，我们首先在包含消息的容器元素（.message-container）中添加了一个计数器属性（counter(unread-messages)）。这个计数器将每个未读的消息都计入其中。

接下来，我们使用伪元素来插入未读消息数量。在:before伪元素中，我们使用CSS属性content来插入计数器的值。我们还设置了背景颜色、颜色、对齐方式等样式，使其看起来像一个小的未读消息图标。

同样，我们也可以在:after伪元素中插入一些文本，这将帮助向用户解释这个未读消息图标的含义。

当用户阅读了所有消息并将所有消息设置为已读时，我们可以更新CSS，从而隐藏未读消息图标。我们可以使用纯CSS的:checked伪类实现这一点。如下所示：

.message-checkbox:checked ~ .message-container::before {
display: none;
}

在这个例子中，我们在复选框（.message-checkbox）被选中时隐藏未读消息图标（.message-container::before）。这意味着一旦用户将所有消息设置为已读，未读消息图标将被隐藏。

总之，CSS提供了很多方法来实现未读消息数量的显示。使用伪元素和计数器属性是一个很好的选择，因为它不仅简单而且可定制性很强。