Pseudo CSS element not displaying outside of parent div - css

Question

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.
Fiddle
Been trying a whole bunch of different solutions that I've found on here for this but I can't get it working.
Any suggestions?
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;
}

Answer 1

Assuming you didn't need that overflow:auto; here is a working solution: https://jsfiddle.net/ug88rptL/1/. I just removed that property.
If you need overflow:auto; and you can use position:fixed; on the ::before pseudo element: https://jsfiddle.net/ug88rptL/2/
Definitive answer after comments:
If you need position:absolute; and imperatively cannot use position:fixed;, just remove position:relative; from the .box div and use different margins to maintain the original positioning. Works as long as you don't set a left or right value for the pseudo-element: https://jsfiddle.net/ug88rptL/10/

Answer 2

the ::before pseudo element is treated as a child element of the element you attach it to, so it will always be inside the box. you're better off wrapping the box in another element and then giving that element the ::before child
Read more here.
.box {
display: block;
background: #FFF;
width: 350px;
height: 140px;
box-shadow: 0 1px 3px #888;
padding: 20px;
overflow: auto;
text-align: center;
border-radius: 5px;
border: 1px solid #FFF;
position: relative;
top: 130px;
left: 30px;
}
.wrapper {
position: relative;
}
.wrapper::before {
position: absolute;
font-family: FontAwesome;
content: "\f0d8";
color: red;
font-size: 80px;
left: 50px;
top: 0;
}
<div class="wrapper">
<div class="box">
BLAH BLAH BLAH BLAH BLAH
</div>
</div>