css序号设置成图标

CSS中可以使用序号来对文本内容进行编号，但是如何将序号设置成图标呢？下面介绍一下如何使用CSS将序号设置成图标。

ol {
      list-style-type: none;
      counter-reset: li;
      margin-left: 0;
      padding-left: 0;
}
    ol >
 li:before {
      content: counter(li)" ";
      counter-increment: li;
      text-align: right;
      display: inline-block;
      width: 1em;
      margin-left: -1.5em;
}
    ol >
 li {
      position: relative;
}
    ol >
 li:before {
      content: "2022";
      font-weight: bold;
      font-size: 1.5em;
      position: absolute;
      left: -0.5em;
      top: 0.2em;
}
    

首先，我们要对有序列表进行重置，去除默认的序号样式。list-style-type: none; 表示去除默认样式，counter-reset: li; 表示重置计数器为0。

接下来，使用伪元素:before为每个li> 标签添加内容，使用counter(li)获取计数器的值，并对计数器进行自增操作，text-align: right; 表示将数字靠右对齐，display: inline-block; 表示将数字设置为行内块元素，width: 1em; 表示设置数字的宽度为1em，margin-left: -1.5em; 表示将数字的左边距设为-1.5em，以达到缩进的效果。

最后，使用伪元素:before为每个li> 标签添加图标样式。在content属性中使用Unicode字符2022表示黑色实心圆，font-weight: bold; 表示粗体，font-size: 1.5em; 表示字体大小为1.5em，position: absolute; 表示绝对定位，left: -0.5em; 表示左边距为-0.5em，top: 0.2em; 表示上边距为0.2em，以达到图标的居中效果。

通过上述CSS代码的设置，我们可以将序号设置成图标，更加美观和实用。对于不同图标的需要，可以在content属性中使用对应的Unicode字符或图片路径来实现。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！