title: Simple CSS Solution for Decorative Line Under Title
body: <p>I am working on a restaurant website. Each area of the menu will have a title and below it the dishes in that section. There is a decorative line under the row of the title that stretches the width of the column. The decorative line, however, does not appear under the text. I am wondering how I would be able to achieve this effect?</p>
  
  <p>I only have one solution, but I am looking for an even simpler solution. I would divide the Title row into three sections: <code>.left-line</code>, <code>.title</code>, and <code>.right-line</code>. Both <code>.left-line</code> and <code>.right-line</code> will contain the background image of the decorative line. <code>.title</code> will only contain the text. Can anyone think of a cleaner solution? The html would be:</p>
  
  <pre><code>&lt;p class="left-line"&gt;&lt;/p&gt;
  &lt;p class="title"&gt;Appetizer&lt;/p&gt;
  &lt;p class="right-line"&gt;&lt;/p&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/IBk8L.jpg" alt="Sample of Design"></p>