title: Custom <hr> with image/character in the center
body: <p>I'd like to recreate this horizontal rule:</p>
  
  <p><img src="https://i.stack.imgur.com/zt1nb.png" alt="enter image description here"></p>
  
  <p>I have the double lines, but I'm not sure how to go about getting some kind of a character or image in the center. I'm thinking I might be able to use :before and :after, but I don't know how to utilize them in this case. For the sake of answering the question, let's just try and get the center character to be a character. I'll figure out the image/icon later.</p>
  
  <p>Ideas? Here's my code for the lines:</p>
  
  <pre><code>hr {
      display:block;
      height:1px;
      border:0;
      border-top:1px solid #444;
      border-bottom:1px solid #444;
      margin:25px 0px;
  }
  </code></pre>