css计数器小记

    xiaoxiao2021-03-26  25

    <!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>
    转载请注明原文地址: https://ju.6miu.com/read-662831.html

    最新回复(0)