css3之未读消息小红点

最新推荐文章于 2024-04-02 16:15:41 发布

萧逸才

最新推荐文章于 2024-04-02 16:15:41 发布

阅读量1.5w

点赞数 3

分类专栏：前端 css3 文章标签： css3

本文链接：https://blog.csdn.net/xyc_csdn/article/details/69792653

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        .red-point{
          position: relative;
        }

        .red-point::before{
          content: " ";
          border: 3px solid red;/*设置红色*/
          border-radius:3px;/*设置圆角*/
          position: absolute;
          z-index: 1000;
          right: 0%;
          margin-right: -5px;
          margin-top: -5px;
        }
    </style>
</head>
<body>
  <span class="red-point">hello world</span>
</body>
</html>