title: Use before & after Pseudo-element to make a line
body: <p>I'm using Pseudo-element <code>:before</code> and <code>:after</code> to draw a line before and after a title. It's working with an image:</p>
  
  <pre><code>.mydiv::before {
  content: url(img/line.png);}
  .mydiv::after {
  content: url(img/line.png);}
  </code></pre>
  
  <p>Here is the result :</p>
  
  <p><img src="https://i.stack.imgur.com/783aa.jpg" alt="you can see befor and after the 1px white horizontale line"></p>
  
  <p>But, I would like the line to expand and fill in the whole div before and after the title, like this :</p>
  
  <p><img src="https://i.stack.imgur.com/NcsVh.jpg" alt="The line reach reach the both sides of the div"></p>
  
  <p>Is there a way to specify a percentage for the image for it to stretch? I try this, but it's not working :</p>
  
  <pre><code>.mydiv img {
    width: 100%;
    height: auto;
  }
  </code></pre>