CSS 列表中的伪元素

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>Test I</li>
   <li>Test II</li>
</ul>