css 显示当前行号

2020-03-29 浏览:211
css 显示当前行号
评论:(0)复制地址

大多数时候我们需要行号自动填充的时候我们可以 大多数时候是插入元素, 在元素里用js填入行号,或者用 ol > li 实现行号填充,


对于上面的方式,都不太灵活,而且需要做额外的工作,现在我们用 css 伪类 的 content 属性来实现行号的自动填充


主要使用了css 伪类的 


content: counter(step);

<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;
}


效果图


1164830-20190625204615740-1787034976.png

评论:(0)复制地址
发布:苗景云 | 分类:IT技术&设计 | Tags:css

相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。