How to apply padding to every line in multi-line text?
<p>I have background color applied to the <code>&lt;span&gt;</code> tag, there is also left and right <code>padding</code> set on it. The problem is: the <code>padding</code> is applied only to the left (beginning) and right (ending) of the <code>&lt;span&gt;</code>, not the left (beginning) and right (ending) of each line when the text is wrapped on several lines.</p>

<p>How can I apply the left and right <code>padding</code> to the <strong>middle</strong> lines?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
  font-weight: 800;
  font-size: 5em;
  line-height: 1.35em;
  margin-bottom: 40px;
  color: #fff;
}
h1 span {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;&lt;span&gt;The quick brown fox jumps over the lazy dog.&lt;/span&gt;&lt;/h1&gt;</code></pre>
</div>
</div>
</p>