css计数器小记

最新推荐文章于 2023-09-01 17:45:43 发布

啊哈前端

最新推荐文章于 2023-09-01 17:45:43 发布

阅读量395

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/wuzhe128520/article/details/54885365

版权

css3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" href="css/wzset.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <style type="text/css">
       .reset {
           counter-reset: test 0; /* 初始化计数器 */
       }
       .counter:before {
           content: counters(test,'');/* 计数器要配合伪类的content一起使用 */
           counter-increment: test 1;/* 设置自增 */
       }
    </style>
</head>
<body>
<i class="icon-search icon-2x" style="font-size:4em;"></i>
<ul class="reset">
    <li class="counter">计数器</li>
    <li class="counter">计数器2</li>
    <li class="counter">计数器3</li>
    <li class="counter">计数器4</li>
    <li class="counter">计数器5</li>
    <li class="counter">计数器6</li>
</ul>
</body>
</html>