title: Pseudo CSS element not displaying outside of parent div
body: <p>I have a pseudo element that is refusing to display outside of it's parent div. I've set it half in, half out so you can see the issue on the following fiddle.</p>
  
  <p><a href="https://jsfiddle.net/ug88rptL/" rel="nofollow">Fiddle</a></p>
  
  <p>Been trying a whole bunch of different solutions that I've found on here for this but I can't get it working.</p>
  
  <p>Any suggestions?</p>
  
  <p>Code :</p>
  
  <pre><code>.box {
  display:block;
  position: relative;
  z-index: 10;
  background: #FFF;
  width: 350px;
  height:140px;
  box-shadow: 0 1px 3px #888;
  padding:20px;
  overflow: auto;
  top: 30px;
  left:50px;
  text-align:center;
  border-radius: 5px;
  border: 1px solid #FFF;
  }
  
  .box::before {
  position:absolute;
  font-family:FontAwesome;
  content:"\f0d8";
  color:red;
  z-index: 20;
  font-size:80px;
  left:50px;
  top:-45px;
  }
  </code></pre>