纯CSS无法动态生成行号，::before的content不支持计算或自动计数，只能写死字符串、引用attr()属性或使用counter()配合真实DOM行元素；可行方案是将每行包裹为block级元素再用counter编号。
行号显示必须用 JavaScript 配合 ::before，纯 CSS 无法动态生成行号
伪元素 ::before 的 content 不支持计算、计数或 DOM 遍历，它只能写死字符串（如 "1."）、引用属性值（attr(data-line)）或插入 Unicode 符号。浏览器没有内置“当前是第几行”的变量，所以指望 ::before 自动给每行加 1、2、3… 是做不到的。
常见错误是试图这样写：
div.line::before { content: counter(line); }
——但 counter() 只对 display: block 元素在文档流中顺序生效，而换行是由 line-height 和容器高度截断产生的视觉效果，并非真实 DOM 行节点，counter 完全不响应。
可行方案：用 <span></span> 包裹每行文本，再用 ::before 插入编号
本质是把“行”变成可控制的 DOM 单元，而不是依赖换行渲染。适合内容固定、行数可控的场景（如代码块、诗歌、条款列表）。
- 手动或脚本将原文按换行符
\n拆分成<span class="line">…</span> - 为
.line设置display: block，确保每行独占一行 - 用
counter实现自动编号：.line-numbers { counter-reset: line; }<br>.line { counter-increment: line; }<br>.line::before { content: counter(line) ". "; } - 注意：
::before默认是inline，若需对齐或缩进，要设display: inline-block或配合text-indent
attr(data-line) 可用于静态行号，但需预置 HTML 属性
如果不想用 counter，又不愿手写编号，可在 HTML 中提前写好 data-line：
<span class="line" data-line="1">第一行</span><br><span class="line" data-line="2">第二行</span>
对应 CSS：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
.line::before { content: attr(data-line) ". "; }
这种写法简单直接，但失去动态性；若后续增删行，必须同步改 HTML 和所有 data-line 值，维护成本高。
容易踩的坑：
-
attr()只读取属性原始字符串，不支持运算（比如不能写attr(data-line) + 1） - 属性名大小写敏感，
data-Line和data-line是不同属性 - 空格和换行会被当作字符输出，
data-line=" 2 "会显示成" 2 . "
多行截断 + 行号？别混用 -webkit-line-clamp 和编号逻辑
如果目标是“显示前 N 行 + 行号 + 展开”，-webkit-line-clamp 和行号属于两个冲突体系：
-
-webkit-line-clamp是基于行高截断的渲染层行为，不产生真实行元素 - 行号需要每个可编号单元有独立 DOM 节点，否则编号只能打在整块文本前面（即整个块标“1.”，不是每行标）
- 强行组合会导致编号错位、截断后行号丢失、或点击展开时编号不重排
真正落地时，要么放弃纯 CSS 截断，改用 JS 控制可见行数并动态更新 data-line；要么接受行号只出现在展开后的完整文本中——毕竟用户没看到的行，标号也没意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
