在CSS中，我們可以使用偽元素和計數(shù)器來設置圖標未讀消息數(shù)，我們需要創(chuàng)建一個計數(shù)器來跟蹤未讀消息的數(shù)量，我們可以使用CSS的偽元素來顯示這個計數(shù)器。

下面是一個基本的示例：

HTML:

<div class="message-icon">
  <span class="count">0</span>
</div>

CSS:

.message-icon {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  text-align: center;
  line-height: 20px;
}
.count {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 20px;
}

在這個示例中，我們創(chuàng)建了一個帶有計數(shù)器的消息圖標，計數(shù)器初始值為0，表示沒有未讀消息，當有新消息時，我們可以更新計數(shù)器并重新渲染圖標，CSS中的偽元素用于顯示計數(shù)器，使其與圖標的其他部分融合。