title: ::after element not showing up when focus
body: <p><a href="https://codepen.io/anon/pen/NLXOww" rel="nofollow noreferrer">Here</a>, the yellow background works fine when focus.</p>
  
  <p>but <a href="https://codepen.io/anon/pen/LJegvN" rel="nofollow noreferrer">here</a>, it's not showing.</p>
  
  <p>CSS:</p>
  
  <pre><code>.user-label::after, 
  .pass-label::after {
    content: '';
    position: absolute;
    top: 80%;
    left: 41%;
    width: 180px;
    height: 53%;
    border-radius: 2px;
    transition: transform 1s;
  }
  
  
  .user-label::after, 
  .pass-label::after {
    z-index: -1;
    background: yellow; /*beige;*/ /*#a86bf;*/   
    transform: scale3d(1, 0, 1);
    transform-origin: 0% 0%;
  }
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <p>I removed the comma on line 89, but why the yellow background displays like that when focus?</p>