[分享]css3怎么给ul加标签

在 CSS3 中，我们可以使用 ::before 和 ::after 伪元素给 ul 元素添加标签内容。

ul::before {
  content: "Start of List";
}
ul::after {
  content: "End of List";
} 

上面的代码会在 ul 元素前和后分别添加内容为“Start of List”和“End of List”的伪元素。

如果我们想要在每个 li 元素前添加标记符号，可以使用 ::before 伪元素为 li 元素添加内容：

li::before {
  content: "2022";
  margin-right: 5px;
} 

上面的代码使用实体编码（•）添加标记符号，然后使用 margin-right 属性添加空格。

我们也可以使用图片来代替标记符号。比如，我们可以使用下面的代码来为 li 元素添加一个箭头：

li::before {
  content: "";
  background-image: url(arrow.png);
  margin-right: 5px;
} 

上面的代码使用了 background-image 属性来添加图片作为标记符号。我们需要将图片的路径替换成正确的路径。

总的来说，使用 CSS3 给 ul 元素添加标签是很容易的，只需要使用 ::before 和 ::after 伪元素即可。通过添加内容或者图片，可以为列表添加一些个性化的效果。