Line numbering on WordPress frontend

It’s not really a WordPress related question, but it’s kind of related to visual editor.

If your content is just raw text separated by <br> tags, I can’t think of any way to do it. But if your content’s structure is like this:

<p>My first line</p>
<p>Second line</p>
<p>This is the third</p>

Then you can use a CSS feature called counter:

body {
    counter-reset: section;
}

p::before {
    counter-increment: section;
    content: "Line number " counter(section) ": ";
}

This will output the following result:

Line number 1: My first line

Line number 2: Second line

Line number 3: This is the third

Which you can customize it to get your favorite style. It doesn’t have to be p element, it can be anything. Actually p elements are already considered as blocks, and automatically occupy a new line. You can see more examples at W3 Schools.