Same padding at start and end of each line

Question

I have a span element with some text in it. I want the text to have a solid background color as well as start/end each line with the same amount of padding.

This jsf

Answer 1

This can be done without using JavaScript or an extra element for each line.

HTML

    consectetur adipiscing elit. Nam at sem eu ligula porttitor iaculis volutpat
    non lacus.

CSS

.marker {
    background: #f77;
    padding: 3px 0;
    position: relative;
    left: -10px;
    line-height: 30px;
}

.marker .marker { left: 20px; }

.marker .marker .marker { left: -10px; }

See how it works on fiddle 3tP8m.

Note: An ancestor of .marker element should have proper padding to contain this element correctly.

All credits of this technic goes to Artem Polikarpov. See his original advice: “How to mark up the text on flexible bottom layer” (in Russian).