每行独立序号排列

今天捣鼓这个行号功能可把我折腾坏了，本来以为改个CSS就完事，结果愣是搞了一整天。事情是从上周开始的，老有读者留言说代码块太长分不清行数，我寻思着给每行加个序号不就行了？

瞎折腾的开端

大清早蹲在电脑前，先拿自己博客开刀。想着用JS给每行包个span标签呗，简单粗暴开干：

• 抓取所有代码块
• 按换行符拆成数组
• 循环拼接带序号的HTML

结果刚上传就翻车了！移动端显示直接乱套，行号跟代码叠罗汉似的。更糟的是复制代码时连序号都粘进去，读者非骂街不可。

小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区

转机出现在下午茶时间

啃三明治时突然想起以前见过的counter-reset属性。赶紧翻文档测试：

• 给代码块容器加counter-reset: line
• 每行伪元素设置counter-increment: line
• 用::before{ content: counter(line) }显示数字

手抖着刷新页面，行号整整齐齐冒出来了！鼠标选中代码时行号自动消失，完美解决复制问题。

新的幺蛾子又来了

正美滋滋截图，老婆手机打开文章突然惊叫：”你这行号咋跑到代码左边去了？”一查发现旧版安卓浏览器把伪元素当成块级元素渲染。气得我往沙发一瘫，眼看着要前功尽弃。

急中生智给行号加了position: absolute，代码区再加个左内边距顶着。重新测试时全家手机平板铺满茶几，连丈母娘的老年机都翻出来试，终于全部显示正常！等回过神来天都黑了，孩子作业本上全是我的测试草稿–数字1234画得跟符咒似的。

所以各位要搞行号千万别学我绕远路，直接上CSS计数器准没错。不过得做好心理准备，浏览器适配这玩意儿，就跟开盲盒似的。