CSS 中的未讀數字是一項非常有用的功能，可以用來顯示未讀郵件或消息的數量。未讀數字通常以紅色或其他醒目的顏色顯示，以便用戶能夠快速看到未讀消息數量。

CSS 中的未讀數字可以使用偽元素 `::before` 或 `::after` 來創建。這要求在 HTML 中添加一些額外的標記，在 CSS 中使用這些標記來顯示未讀數字。以下是一個使用 `::before` 偽元素顯示未讀數字的示例：

.notification::before {
content: "10";
background-color: red;
color: white;
border-radius: 50%;
padding: 2px 5px;
position: absolute;
top: -5px;
right: -5px;
 }

在上面的示例中，我們使用 `content` 屬性添加了一個數字。這個數字被包裝在一個圓形的背景中，并通過 `padding` 屬性來增加數字的大小。我們設置 `position` 屬性為 `absolute`，以便數字始終位于父元素的右上角。最后，我們將 `top` 和 `right` 屬性設置為負值，以便數字超出父元素的邊緣。

使用 CSS 的未讀數字是使網站更具吸引力和易用性的一種方法。未讀數字是重要信息的快速摘要，這使用戶可以更快地掌握他們需要知道的信息。