How to competently make internal horizontal indents of text in an element with position:inline ?

Question

css

Actually, it is necessary to make up like this:

But it turns out only this way:

There are indents only on the left of the first line and on the right of the last.
How to make it more competently so that all lines have it on both sides?
Of course, you can make each line a separate element and wrap it all in

<a>...</a>

but I don't think this is the best way.

You can look at the code and try to change it here

Answer 1

chikuyonok.ru/2010/01/uniform-text-background/