title: Line heading on sides not appear in firefox
body: <p>Hello guys today i have a problems with compatibility with css and firefox, the issue is when i enter to my website www.fashoop.com you canse some line headers on sides, like this:</p>
  
  <pre><code> (GOOGLE CHROME EXAMPLE)
  </code></pre>
  
  <p>COLOR BLUE    AND     COLOR CYAN</p>
  
  <p>------------TITLE----------------</p>
  
  <p>and this effect work fine on google chrome but the issue presents when you enter with firefox explorer the line of one side dissapear and automatically put points like this:</p>
  
  <pre><code> (FIREFOX EXAMPLE)
  </code></pre>
  
  <p>COLOR BLUE    AND     COLOR CYAN</p>
  
  <p>------------TITLE....</p>
  
  <p>Any here know why its happend in firefox?, i hope can help me guys! here the link of the website www.fashoop.com thanks!</p>
  
  <p>CODE:</p>
  
  <pre><code>span.section-title{
      position: relative;
      overflow: hidden;
      white-space: nowrap;
      text-align: center;
      text-overflow: ellipsis;
  
      font: 1.6em/1.1 Georgia;
      padding: .2em 0;
      }
  span.section-title:before,
  span.section-title:after {
      content: "";
      position: relative;
      display: inline-block;
      width: 50%;
      height: 2px;
  
      vertical-align: middle;
      background: #000;
      }
  span.section-title:before {    
      left: -.5em;
      margin: 0 0 0 -50%;
      background: #ef387a;
      }
  span.section-title:after {    
      left: .5em;
      margin: 0 -50% 0 0;
      background: #1c77bd;
      }
  </code></pre>