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: -5px;
          margin-top: -5px;
        }
    style>
head>
<body>
  <span class="red-point">hello worldspan>
body>
html>

你可能感兴趣的:(前端,css3)