css :active

<!DOCTYPE html>
<html>

<head>
    <title>a</title>
    <meta name="content-type" content="text/html; charset=UTF-8">
    <style>
        span {
            display: block;
             30px;
            margin: 20px;
            border-radius: 8px;
            padding: 20px 50px;
            text-align: center;
            background: green;
        }

        span:active::after {
             30px;
            background: pink;
        }

        span::after {
            content: '';
             20px;
            height: 20px;
            display: block;
            background: red;
            transition: all .2s ease-in-out;

        }
    </style>
</head>

<body>
    <span></span>
    
</body>

</html>

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/HePandeFeng/p/13827668.html