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

最新推荐文章于 2023-07-15 09:33:08 发布

Web-Jason365

最新推荐文章于 2023-07-15 09:33:08 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： css 列表

本文链接：https://blog.youkuaiyun.com/Web_Jason365/article/details/108051441

本文介绍了如何使用CSS3的伪元素`before`为无序列表`ul`中的`li`元素添加有序序号。通过设置`counter-increment`计数器，并在`li`的`before`伪元素中调用计数器，可以实现方便地为列表添加美观的序号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

原来未接触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>
&l