突发奇想，实现了一下手机 app 图标右上方的消息计数功能。效果类似我们平时在手机上看到的消息计数，如下图：
实现思路很简单：首先创建一个模拟 app 图标的 div 元素，设置宽度高度和圆边框；之后给该 div 元素设置 ::after 伪元素，用作消息计数；这里需要给伪类设置宽度高度、圆边框、背景颜色、字体颜色，关键在于基于 div 元素的宽度高度设置伪类的位置。
HTML
<div class="icon-container">
<div class="icon"></div>
</div>CSS
.icon {
width: 45px;
height: 45px;
background-color: lightgray;
border-radius: 20%;
}
/* only one number */
.icon::after {
content: "6";
display: block;
box-sizing: border-box;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: red;
position: relative;
top: -10px;
left: 35px;
text-align: center;
color: white;
}解析
div 元素
- 宽度和高度相同
- border-radius 模拟圆边框效果
伪元素 ::after
- content 内容即为消息个数
- 设置 display 属性为 block，以便设置的宽度高度可以生效（行内元素设置宽度高度没有用）
- 宽度和高度相同
- border-radius 值为伪元素高度的一半，这样当字数变多时，圆边框不会失真
- 选择相对定位（相对定位是相对于元素本来位置的定位方式），top 值应为负的伪元素高度的一半，left 值应为 div 元素的宽度减去伪元素宽度的一半
- 红色背景和白色字体
更多 CSS 技巧，请关注微信公众号
