列表li利用before显示有序号数字 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      
        li{
            list-style: none; /*影藏li前面的圆点*/
            counter-increment: number; /* ① 有序数字*/
        }
        li::before{
            content: counter(number); /* ② li前面显示数字，*/
        }
        /* ① 和 ②得单独分开，不然数字全是一样的 */

    </style>
</head>
<body>
<ul>
    <li>设计</li>
    <li>开发</li>
    <li>测试</li>
    <li>运营</li>
</ul>
</body>
</html>

 

posted @ 2021-05-28 11:46  qq321722956  阅读(427)  评论(0)    收藏  举报