CSS是前端開發中非常重要的一部分，同時它也可以用來為網頁增加一些實用的功能。其中之一就是未讀消息提示。

未讀消息提示可以讓用戶在不時時刻檢查消息的情況下，及時收到新消息的通知。其實現過程也十分簡單，在CSS代碼中只需添加以下樣式。

.notification {
background-color: red;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
position: absolute;
top: 5px;
right: 5px;
}

在以上樣式中，我們為未讀消息提示添加了一個圓形的紅色背景，白色文字，同時對其進行了定位，在頁面右上角顯示。我們還設置了它的寬高為20px，圓角為50%，以及文字的居中，行高，字體大小等屬性。

接下來我們在HTML代碼中加入未讀消息提示功能，只需添加以下代碼即可。

<div class="message">
<i class="fa fa-envelope"></i>
<span class="notification">3</span>
</div>

在以上代碼中，我們在message類下放置了一個標簽，用來顯示信封圖標，同時在標簽中添加一個數字3，表示當前有三條未讀消息。如果要動態更新消息數量，則可以使用JavaScript來實現。

在以上完成的調整后，我們就可以實現一個漂亮、實用的未讀消息提示功能啦！