title: Line before and after title over image
body: <p>I want to create a <strong>line before and after a centered title</strong>. The line and text must have a <strong>transparent background</strong> to be able to position them on a uneven background. The line must not be 100% width, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/H90lm.png" alt="Centered text with line before and after over an image"></p>
  
  <p>The text of the title can change:</p>
  
  <ul>
  <li>Width of title isn't known</li>
  <li>The title can span on several lines</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1 {
    text-align: center;
    border-bottom: 1px solid #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Today&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>