自定义 li 标签序列的样式

Himmelbleu / 2023-05-10 / 原文

第一步删除 li 标签的默认样式，取消 ::mark 代理样式（默认样式）。第一步已经把默认样式取消了，自然没有了序号，使用 CSS 的 counter() 函数和 counter-increment 属性来自定义序列号。

通过 list-style-type: none 删除 li 标签的默认样式
在 li 标签样式中设置 counter-increment: step-counter，其中设置的属性值 step-counter 要添加到 li 伪元素 ::before 中的 content: counter(step-counter) 中。

以下是代码示例：

ol,
ul {
  padding-left: 3rem;

  li {
    margin-bottom: 1.4rem;
    position: relative;
    line-height: 1.7;
    list-style-type: none;
    counter-increment: step-counter;

    &::before {
      content: counter(step-counter);
      border-radius: 50%;
      height: 2rem;
      width: 2rem;
      position: absolute;
      top: 0;
      left: -2.5rem;
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      color: #a7a7a7;
      background: #2e2e2e;
    }
  }

  li:last-child {
    margin-bottom: 0;
  }
}

以下是实现的效果图：

图1：效果图