利用伪元素before给无序列表ul中的li添加有序序号

向右看齐 2022-11-28 10:39 179阅读 0赞

在建站过程中做侧边栏文章排行榜的时候，我们会为我们的网站文章进行一个排序，在这种情况下就会用到无序列表，那么少了序号排列网站看上去就不是那么美观。

原来未接触CSS3的时候，我的做法是在li元素前添加一个行内元素，给这个元素添加样式，这样感觉什么麻烦，而CSS3中的Before伪元素实现这样的功能就十分便捷。

需要实现伪元素before给无序列表li添加序号，需要在CSS3中做以下操作：

一、首先要给li标签设定一个计数器

li\{counter-increment:number;\}

二、通过伪元素before在li元素前面调用计数器counter，就可实现给无序列表中的li添加有序序号。

以下是html及css代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            ul,li{
                list-style: none;
            }
            ul li a{
                text-decoration: none;
            }
            li{
                counter-increment: number;
            }
            li::before{
                content: counter(number);
                color: red;
                margin-right: .5em;
            }
        </style>
    </head>
    <body>
    <ul>
        <li><a href="#">测试</a></li>
        <li><a href="#">序号</a></li>
        <li><a href="#">列表</a></li>
        <li><a href="#">自动序号</a></li>
        <li><a href="#">爽不爽</a></li>
        <li><a href="#">便捷</a></li>
    </ul>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3中ul,li{}； ul li{}； ul＞li{}有何区别

![a09384c31d2f3403435ddb8d7e617445.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

分手后的思念是犯贱/ 2024年03月29日 16:32/ 0 赞/ 100 阅读

相关无序列表＜ul＞和有序列表＜ol＞

（1）创建无序列表 `<ul>` 标签定义无序列表。将 `<ul>` 标签与 `<li>` 标签一起使用，创建无序列表。 ![在这里插入图片描述][b758531

今天药忘吃喽~/ 2024年03月29日 15:46/ 0 赞/ 87 阅读

相关使用jQuery为无序列表（ul）中的列表项（li）添加背景颜色

要在使用jQuery编写的网页中为无序列表中的列表项添加背景颜色，您可以按照以下步骤进行操作：步骤 1：引入jQuery库首先，在您的HTML文件中引入jQuery库

怼烎@/ 2024年03月01日 03:36/ 0 赞/ 38 阅读

相关利用伪元素before给无序列表ul中的li添加有序序号

在建站过程中做侧边栏文章排行榜的时候，我们会为我们的网站文章进行一个排序，在这种情况下就会用到无序列表，那么少了序号排列网站看上去就不是那么美观。原来未接触CSS3的时候，

向右看齐/ 2022年11月28日 10:39/ 0 赞/ 180 阅读

相关 ul li列表排序

在一个列表中，每一项都有多个数据，像这样 <ul class="datalist"> <li class="item"> <span c

以你之姓@/ 2022年10月16日 09:59/ 0 赞/ 238 阅读

相关 js循环遍历ul中li的点击事件，给给选中li添加css

功能：对于一个ul中固定的li个数，当点击其中一个li时，改变选中li的颜色；同时改变对应的另一个ul中li的颜色页面初始化的界面： ![Center][] HT

小咪咪/ 2022年06月08日 01:56/ 0 赞/ 1395 阅读

相关有序列表
与无序列表ul用法

有序列表<ol>与无序列表ul用法其中<li> 标签定义列表项目，<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 ![watermark_ty

亦凉/ 2022年03月17日 20:16/ 0 赞/ 418 阅读

相关有序列表:ol ，无序列表:ul

qq：581478349 ![20190325172437532.png][] <!DOCTYPE html> <html> <hea

素颜马尾好姑娘i/ 2021年09月18日 14:44/ 0 赞/ 451 阅读

相关 JavaScript系列之实现ul动态添加li元素

<!doctype html> <html manifest="lab4.manifest"> <head> <title>Mobile Cookbook<

分手后的思念是犯贱/ 2021年09月10日 15:16/ 0 赞/ 563 阅读

相关 HTML <ul> 无序列表

ul的英文全称是unordered list，翻译成汉语就是无序列表的意思。顾名思义，通过`< ul>`元素可以创建无法标记顺序的列表（也就是无序列表）。所谓无序...

小灰灰/ 2020年05月16日 17:26/ 0 赞/ 959 阅读