WordPress前端上的行号

时间:2017-07-29 作者:Mr. Fontastic

我已经查看了所有可能的插件,但没有一个插件具备我所需要的功能,即只在前端进行行号。

假设我的WordPress帖子在后端编辑器中是这样的:

我的第一行

第二行

这是第三次

我希望我的首页像这样

01我的第一行

02第二行

03这是第三次

可以用代码或插件完成吗?

1 个回复
最合适的回答,由SO网友:Johansson 整理而成

这其实不是一个与WordPress相关的问题,但它有点与visual editor相关。

如果您的内容只是由分隔的原始文本<br> tags,我想不出任何办法。但如果您的内容结构如下:

<p>My first line</p>
<p>Second line</p>
<p>This is the third</p>
然后,您可以使用称为计数器的CSS功能:

body {
    counter-reset: section;
}

p::before {
    counter-increment: section;
    content: "Line number " counter(section) ": ";
}
这将输出以下结果:

第1行:我的第一行

第2行:第二行

第三行:这是第三行

您可以对其进行定制,以获得您最喜爱的风格。不必这样p 元素,它可以是任何东西。事实上p 图元已被视为块,并自动占用新行。您可以在中看到更多示例W3 Schools.

结束

相关推荐