title: Align shapes with css :before, :after
body: <p>I am trying to make shapes in the :before/ :after . this works fine in chrome but in Firefox. there is a small misalignment. and while printing that causes a small white space between the element and the :after selector. </p>
  
  <p>This is how it looks in print preview with Firefox</p>
  
  <p><a href="https://i.stack.imgur.com/78uIi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/78uIi.png" alt="enter image description here"></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="topbar"&gt;
        &lt;div class="text"&gt;Text&lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>My CSS</p>
  
  <pre><code>/* Styles go here */
  
  .container .topbar {
    height: 15px;
    background-color: #91C34F !important;
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  
  .container .topbar .text {
    position: relative;
    color: #fff !important;
    float: right;
    top: 3px;
    background-color: #91C34F !important;
    font-size: 16px;
    padding: 8px 80px;
  }
  
  .container .topbar .text:after {
    height: 0;
    content: "";
    display: block;
    position: absolute;
    top: -0.5px;
    left: -37px;
    border-right: 38px solid #91C34F !important;
    border-bottom: 34px solid transparent;
  }
  </code></pre>
  
  <p>This is a plunk for above code <a href="https://plnkr.co/edit/oll1ooap2mKC1EQo0n84?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/oll1ooap2mKC1EQo0n84?p=preview</a>.</p>
  
  <p>How to make that align properly in all browsers?</p>