CSS3 实现未读消息小红点


<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: -8px;
        }
    style>
head>
<body>
  <span class="red-point">设置span>
body>
html>

效果图:
这里写图片描述

你可能感兴趣的:(css)