先看效果：在文本框输入任意文本，两三行就可以，然后点击下方的文本按钮（可以再点击），文本框中的内容将在该处以带行号的显示显示出来。

这里，行号是使用基于CSS伪元素 counter 函数实现的，具体做法是，首先在指定类型元素比如 p 或 div 的CSS设置中指定一个自然递增的变量，然后在该类型元素的伪元素 ::before 或 ::after 的 content 属性中使用 counter 函数指向递增变量，写成 counter(变量) 。以下是参考代码：

<style>
	/* 限定 class="mydiv" 的 p 标签带行号 */
	.mydiv > p {
		counter-increment: idx; /* 计数器递增属性 : 通过变量名 idx 传递 */
		/* 以下是排版样式 */
		white-space: pre;
		tab-size: 4;
		position: relative;
		margin: 4px 0 4px 40px;
	}
	/* p选择器伪元素应用 counter 函数 */
	.mydiv > p::before {
		content: counter(idx); /* 伪元素文本内容  : 用 counter() 函数返回 idx 传值  */
		/* 以下是排版样式 */
		position: absolute;
		left: -30px;
		color: #aaa;
	}
</style>

<div class="mydiv">
	<p>我是第一行</p>
	<p>我是第二行</p>
</div>
	

代码中CSS排版样式是为了让行号和正文区分开来，不然行号和正文是连接在一块儿的，具体行为是 ::before 在正文前、::after 在正文后。若仅仅是 counter(变量名) 的应用最简单的只需两三行代码，一是在指定元素用 counter-increment 属性指定传参变量，然后便是在对应的伪元素的 content 内容属性应用 counter(变量名) 实现计数器的输出。当然，CSS的 counter 函数可做的事情不止于此，它可以重置（counter-reset，比如从10开始）、设置输出内容和样式（counters(变量名, 字串, 样式)），细细打磨可以实现很多实用效果，感兴趣的朋友可以自行研究。