代码如下
代码语言：javascript复制.code {
padding: 10px 10px 10px 40px;
font-size: 13px;
line-height: 18px;
background-color: #eee;
font-family: "Lucida Console", Consolas, Monaco;
white-space: pre-wrap;
word-break: break-all;
position: relative;
overflow: hidden;
}
.code::before {
content: '01.A 02.A 03.A 04.A 05.A 06.A 07.A 08.A 09.A 10.A 11.A 12.A 13.A 14.A 15.A 16.A 17.A 18.A 19.A 20.A 21.A 22.A 23.A 24.A 25.A 26.A 27.A 28.A 29.A 30.A 31.A 32.A 33.A 34.A 35.A 36.A 37.A 38.A 39.A 40.A 41.A 42.A 43.A 44.A 45.A 46.A 47.A 48.A 49.A 50.A 51.A 52.A 53.A 54.A 55.A 56.A 57.A 58.A 59.A 60.A 61.A 62.A 63.A 64.A 65.A 66.A 67.A 68.A 69.A 70.A 71.A 72.A 73.A 74.A 75.A 76.A 77.A 78.A 79.A 80.A 81.A 82.A 83.A 84.A 85.A 86.A 87.A 88.A 89.A 90.A 91.A 92.A 93.A 94.A 95.A 96.A 97.A 98.A 99';
position: absolute;
top: 10px;
bottom: 10px;
left: 0;
text-align: right;
background-color: #fbfbfb;
color: #333;
outline: 100px solid #fbfbfb;
clip: rect(-100px 2em 9999px 0);
/* IE9 */
clip: rect(-100px 3.5ch 9999px 0);
overflow: hidden;
}CSS构建代码行数的原理如下：
- 使用::before伪元素content属性生成，这样不用担心网页框选复制代码的时候行数序号会污染。
- 使用A控制字符的换行。
- ::before伪元素绝对定位在左侧，祖先元素设置overflow:hidden隐藏多余的行数。
核心CSS代码示意如下：
代码语言：javascript复制.code {
position: relative;
overflow: hidden;
}
.code::before {
content: '01.A 02.A 03.A 04.A 05.A 06.A 07.A 08.A 09.A 10.A 11.A 12.A 13.A 14.A 15.A 16.A 17.A 18.A 19.A 20.A 21.A 22.A 23.A 24.A 25.A 26.A 27.A 28.A 29.A 30.A 31.A 32.A 33.A 34.A 35.A 36.A 37.A 38.A 39.A 40.A 41.A 42.A 43.A 44.A 45.A 46.A 47.A 48.A 49.A 50.A 51.A 52.A 53.A 54.A 55.A 56.A 57.A 58.A 59.A 60.A 61.A 62.A 63.A 64.A 65.A 66.A 67.A 68.A 69.A 70.A 71.A 72.A 73.A 74.A 75.A 76.A 77.A 78.A 79.A 80.A 81.A 82.A 83.A 84.A 85.A 86.A 87.A 88.A 89.A 90.A 91.A 92.A 93.A 94.A 95.A 96.A 97.A 98.A 99';
position: absolute;
}对，方法比较傻，就是一口气把99行序号在CSS中埋伏好。
CSS方法实现的优缺点 优点： 简单，高效，性能十足，即使代码变来变去布局也OK。
缺点： 支持的行数有限，例如上面的demo最多支持99行代码。
如果代码行数惊人，例如上千行，则建议辅助JS去生成序号，例如构建一段包含content内容的<style>插入到页面中。
兼容性 方法至少IE9 浏览器支持，IE8浏览器理论上支持。
声明：以上内容转自http://www.zhangxinxu.com/wordpress/2018/02/pure-css-js-html-code-line-number/
下面说说我是如何将其投入使用的吧！
1，如何解决上文提到的→支持的行数有限，例如上面的demo最多支持99行代码？ 我是直接用php循环语句写了个循环，直接输出了个支持到8000行的css代码，理论上足够够用了【因为基本上没人会在网页上写上万行代码！】，css文件最终定格60多k的大小(捂脸)。
2，为什么想用纯css的？ 在给博客代码高亮换成prismjs时，prismjs官网虽然可以选择行号组建，但是总会出现些问题（博主忘记问题是啥了，毕竟过去好几天了），然后就百度纯css的看看有没有前辈折腾过，没想到还真有，而且文章还挺新鲜的（2018年发表的），于是就想尝鲜
3，感受 文章开始处的padding-left 40px参数是给行号挪位置的，最初弄时可以设置的小一点，这样就方便看行号是否和代码对应上，没有错位！ .code::before的top参数和bottom参数和.code的padding的top和bottom参数一致。
