app 图标右上方消息计数

最新推荐文章于 2024-03-19 00:45:00 发布

南张人

最新推荐文章于 2024-03-19 00:45:00 发布

阅读量1.2k

点赞数

分类专栏： web前端文章标签： ::after border-radius 消息计数模拟 app 图标 CSS技巧

本文链接：https://blog.csdn.net/u011848617/article/details/83478614

版权

突发奇想，实现了一下手机 app 图标右上方的消息计数功能。效果类似我们平时在手机上看到的消息计数，如下图：

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: re