title: Icon or image in center with line on both sides
body: <p>I'm trying to create some CSS to have a icon or image in the center with a line on both sides, but it seems like i'm doing something wrong and need some help. </p>
  
  <p>For simplicity I just use a star character in the code.</p>
  
  <pre><code>&lt;div class='line-container'&gt;&lt;div class='line-icon'&gt;*&lt;/div&gt;&lt;/div&gt;
  
  .line-icon {
  text-align: center;
  }
  
  .line-icon::before {
  width: 25%;
  height: 1px;
  border: 1px solid #ccc;
  }
  
  .line-icon::after {
  width: 25%;
  height: 1px;
  border: 1px solid #ccc;
  }
  </code></pre>