title: Is it possible to set a background color on individual words using just CSS?
body: <p>I'm trying to recreate this effect:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 span {
      background: #000;
      color: #fff;
      padding: 0 4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;
      &lt;span&gt;This&lt;/span&gt;
      &lt;span&gt;is&lt;/span&gt;
      &lt;span&gt;Life&lt;/span&gt;
  &lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, the project I'm working is meant to be used on a CMS, and I cannot expect my client to know how to add span tags (especially since it will require using a class on the actual site). So I'm wondering whether it is possible to recreate this effect without breaking each word into a separate element. I already know this is possible via JavaScript, and am looking specifically for CSS-only solutions.</p>