As aspas do ::before não ficam atrás do texto.

Olá! Tenho o seguinte código.

.bio > p::first-letter{
    font-size: 2em;
    color: #3C1D3D;
    font-weight: bolder;
    margin-right: .1em;
    line-height: 1;
}

.citacao-bio{
    background-color: #D9E5E3;
    border: 0.625rem solid #C2CCCA;
    padding: 1.25rem;
    margin: 20px 40px;
    width: 250px;
    box-sizing: border-box;
    position: relative;
}

.citacao-bio::before{
    content: '"';
    font-size: 10em;
    color: #bbb;
    position: absolute;
    top: -.3em;
    z-index: 0.5;
}


.citacao-bio:nth-of-type(even){
    float: left;
    margin-left: 0;
}

.citacao-bio:nth-of-type(odd){
    float: right;
    margin-right: 0;
}

.citacao-bio:nth-of-type(even):hover,
.citacao-bio:nth-of-type(even):focus{
    position: relative;
    z-index: 999;
    box-shadow: 0 0 0 99999px rgba(0,0,0, .8);
    transform: scale(1.2) rotate(-10deg);
}

.citacao-bio:nth-of-type(odd):hover,
.citacao-bio:nth-of-type(odd):focus{
    position: relative;
    z-index: 999;
    box-shadow: 0 0 0 99999px rgba(0,0,0, .8);
    transform: scale(1.2) rotate(10deg);
}

Já tentei de várias maneiras, mas as apas nunca ficam atrás. Como corrijo isso?