css偽類實現行號自動填充

大多數時候我們需要行號自動填充的時候我們可以 大多數時候是插入元素， 在元素里用js填入行號，或者用 ol > li 實現行號填充，

對於上面的方式，都不太靈活，而且需要做額外的工作，

 

現在我們用 css 偽類 的 content 屬性來實現行號的自動填充

主要使用了css 偽類的 

content: counter(step);

HTML

<div>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
    <p>這是一些文字</p>
</div>

CSS

div{
    counter-reset: step;
    counter-increment: step 0;
}
p{
    position: relative;
    margin: 4px 0;
    padding-left: 24px;
}
p::before {
    content: counter(step);
    counter-increment: step;
    position: absolute;
    left: 0;top: 0;
    display: block;
    width: 20px;
    text-align: right;
    background-color: #eee;
}

效果圖