第一步删除 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;
}
}
以下是实现的效果图:
标签:自定义,样式,标签,counter,li,content,step From: https://www.cnblogs.com/Himmelbleu/p/17387172.html