Фон под строчками: добавляем поля

Проблема: если задать фон строчным элементам, получается вот так:

Пробуем padding, отступы добавились только в начале и в конце строки

Аналогичная ситуация с border:

Прекрасное решение было найдено здесь: codepen.io/davatron5000/pen/HGjuv.

Суть состоит в добавлении тени. Тень добавляется к любому краю строки, даже если это не конец строки, а перенос.

box-shadow: -20px 0 yellowgreen,
             20px 0 yellowgreen;

Тень не влияет на размер и положение элемента, поэтому дополнительно надо добавить padding родителю.

Результат:

Отличное решение и симпатичный эффект.