HTML/CSS: 如何制作未讀信息圖標

最近公司項目中涉及到制作通訊界面中未讀信息的帶數字的紅色圓點圖標。

 

拿我目前的博客頭像圖片為例（其實就是谷歌圖片中粗略挑了一張順眼的圖片），效果圖如下：

HTML代碼如下：

<img id="picture" src="PATH_OF_PICTURE">
<div id="badge">1</div>

CSS代碼如下：

#picture {
    margin-top: 50px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
}
#badge {
    width: 20px;
    height: 20px;
    line-height: 20px;  /* 數值與height相同，使數字垂直居中 */
    text-align: center;  ／* 使數字水平居中 *／
    background-color: red;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;  ／* 使正方形變圓形，矩形變橢圓形 */
    position: relative;
    bottom: 60px;
    left: 90px;
}

 

CSS中的各種數值大小僅是例子而已，除了我標示在注釋中的需要值得注意的地方外，這個例子是圓點始終為圓形且大小不變的情況，但數字一旦超過一位數，那么圓形就不能滿足需求了，一般我們所見的圖標會隨着字符長度的變化而變化的，如下圖：

HTML代碼如下：

<img id="picture" src="PATH_OF_PICTURE">
<span id="badge">1000</span> <!- 把div改成span，不然寬度會占據整行-->

CSS代碼如下：

#picture {
    margin-top: 50px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
}
#badge {
    padding: 2px 5px;  /* 不需要定義height與width，添加合適的padding使圓圈隨字符長短變化而改變 */
    line-height: 20px;
    text-align: center;
    background-color: red;
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    position: relative;
    bottom: 45px;
    left: -20px;
}

但是這樣的代碼存在一個問題，當把數字再變回成個位數時，紅點的位置就過於偏左了。

所以一般會給數字設置一個上限，如果超過那個數字，就在那個數字后邊加上➕表示。效果如下：