好资源导航 » 文章资讯 » CSS 列表中的伪元素

CSS 列表中的伪元素

2024-04-15 18:17:03 467

Example

伪元素通常用于更改列表的外观（主要用于无序列表，ul）。

第一步是删除默认的列表项目符号:

ul{
 list-style-type:none;
}

然后添加自定义样式。在本例中，我们将为项目符号创建渐变框。

li:before{
 content:"";
 display:inline-block;
 margin-right:10px;
 height:10px;
 width:10px;
 background:linear-gradient(red,blue);
}

HTML

<ul>
 <li>TestI</li>
 <li>TestII</li>
</ul>