CSS 實現消息數字提示

// HTML
<div class="message">
<span class="count">3</span>
<a href="#">消息</a>
</div>
// CSS
.message {
position: relative;
}
.message .count {
display: inline-block;
position: absolute;
top: -10px;
right: -10px;
color: #fff;
background-color: #f00;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
font-size: 12px;
line-height: 20px;
}
.message a {
display: inline-block;
padding: 5px 10px;
background-color: #ddd;
}
// Explanation
首先給包含消息和數字的 div 加上相對定位 position: relative，這樣后面絕對定位就以它為基準。
然后為數字 span 添加絕對定位 position: absolute，并將它的 top 和 right 屬性設置為 -10px，這樣它就移到了消息 div 的右上角。為了讓它呈現一個圓形，還需要設置 border-radius: 50%。
為了讓數字能夠很好地居中顯示，還需要設置寬度和高度都為 20px，text-align: center，line-height 為 20px，font-size 為 12px（可以根據自己的實際情況調整）。
最后為消息鏈接添加一個背景顏色（這里設置為 #ddd）。