如果你曾經在網頁中的消息列表或者郵件收件箱里看到過一些消息列表，你可能會注意到一些已讀的消息會被標記為已讀的紅點。這種東西在許多網站和應用程序中都可見。在這篇文章中，我們將討論如何使用CSS來實現這種效果。

我們可以使用CSS中的偽類選擇器來實現的已讀紅點。偽類選擇器是一種能夠選擇HTML文檔中不存在的元素的選擇器。例如，:before偽類可以用來為一個元素的內容添加內容。我們可以使用它來添加一個紅點。

.selector:before {
content: "";
display: inline-block;
margin-right: 5px;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: red;
}

在上面的代碼中，我們使用:before偽類選擇器為我們的元素添加了一個紅色的圓形。content屬性用于定義元素的內容。為了正確地顯示已讀紅點，我們還需要對消息列表的樣式進行調整，以確保已讀紅點能夠正確地居中。

下面是一個例子，演示了如何使用CSS來實現已讀的紅點。

.message {
display: flex;
align-items: center;
padding: 10px;
}
.message.unread:before {
content: "";
display: inline-block;
margin-right: 5px;
height: 8px;
width: 8px;
border-radius: 50%;
background-color: red;
}
.message.unread {
font-weight: bold;
}

在上面的代碼中，我們使用了flexbox來對我們的消息列表進行調整。我們還定義了一個.message.unread類，用于為尚未讀取的消息添加樣式。這里使用了CSS的層疊優先級。因此，在定義中未讀取的類將優先于:before偽類。

總之，使用CSS創建已讀紅點非常簡單。通過使用:before偽類選擇器和一些簡單的CSS，我們可以輕松地為我們的網頁或應用程序創建視覺效果并向用戶傳達有用信息。