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

向右看齐 2022-11-28 10:39 196阅读 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 条评论，196人围观）

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

相关阅读

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

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

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

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

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

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

相关有序列表、无序列表、嵌套列表

<!DOCTYPE HTML PUBLIC "-//DTD//W3C HTML 4.01 Transitional//EN" "http://www.w3.org/TR

た入场券/ 2023年06月30日 02:57/ 0 赞/ 21 阅读

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

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

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

相关 php%3cul%3e 无序列表,详解网页HTML有序列表ol和无序列表ul

本文详解网页HTML有序列表ol和无序列表ul 用于组织数据的列表学习了这么多控制网页显示的HTML标签，读者可以初步制作纯文章页面了。本节学习HTML中的列表元素，列表

r囧r小猫/ 2022年10月21日 13:58/ 0 赞/ 25 阅读

相关 ul li列表排序

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

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

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

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

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

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

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

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

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

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

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

相关 HTML <ul> 无序列表

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

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