CSS是一種很強大的前端技術，可以制作出很多特效。其中，右側消息數量也是CSS常見的特效之一。在這篇文章中，我們將介紹如何使用CSS制作右側消息數量。

首先，我們需要一個帶有消息數量的圖標。這個圖標可以是自己設計的，也可以從網絡上下載。然后，我們需要在HTML文件中添加這個圖標。如下所示：

<div class="message-icon">
<i class="fa fa-envelope-o"></i>
<span class="message-number">10</span>
</div>

在這個代碼中，我們使用了Font Awesome提供的envelope-o圖標。為了顯示消息數量，我們在圖標上方添加了一個span標簽，并使用CSS樣式來控制其位置和樣式。接下來，我們需要編寫相應的CSS代碼。

.message-icon {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
border-radius: 50%;
background-color: #ccc;
color: #fff;
}
.message-number {
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 12px;
line-height: 20px;
text-align: center;
background-color: #f00;
color: #fff;
}

這個CSS代碼中，我們首先給message-icon添加了一些基本的樣式，包括大小、圓角、顏色等。然后，我們使用position屬性設置其為relative定位，并使用top和right屬性來控制message-number的位置。message-number我們設置為absolute定位，使其相對于message-icon進行定位。最后，我們使用border-radius來控制message-number的圓角，再使用background-color和color來設置其背景色和文字顏色。

通過以上這些步驟，我們就可以使用CSS制作出一個非常美觀的右側消息數量特效了。歡迎大家嘗試使用CSS制作其它的特效。