css伪类实现行号自动增加

最新推荐文章于 2024-08-11 15:21:57 发布

TianNicholas

最新推荐文章于 2024-08-11 15:21:57 发布

阅读量849

点赞数

分类专栏：前端技术 HTML

本文链接：https://blog.youkuaiyun.com/qq_32615575/article/details/114305043

版权

前端技术同时被 2 个专栏收录

78 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

样式代码如下

pre {

  background: #303030;

  color: #f1f1f1;

  padding: 10px 16px;

  border-radius: 2px;

  border-top: 4px solid #00aeef;

  -moz-box-shadow: inset 0 0 10px #000;

  box-shadow: inset 0 0 10px #000;

  counter-reset: line;

}

pre span {

  display: block;

  line-height: 1.5rem;

}

pre span:before {

  counter-increment: line;

  content: counter(line);

  display: inline-block;

  border-right: 1px solid #ddd;

  padding: 0 .5em;

  margin-right: .5em;

  color: #888

}


<pre><span>lorem ipsum</span>

<span>&gt;&gt; lorem ipsum</span>

<span>lorem ipsum,\ </span>

<span>lorem ipsum.</span>

<span>&gt;&gt; lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

<span>lorem ipsum</span>

</pre>

效果图类似