As aspas não ficam atrás do texto

Mesmo usando position as aspas não ficam atrás do texto. Tentei usar z-index -1 na .citacao p::before, mas as aspas só aparecem corretamente quando passo o mouse por cima das citações.

<div class="conteudo">
<!-- ... -->
<h2>Como trabalho</h2>
            <blockquote class="citacao" tabindex="1"><p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p><cite>José Souza, Fiat</cite></blockquote>
            <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>
</div>

.citacao{
    background-color: #D9E5E3;
    border: .5em solid #C2CCCA;
    width: 33ch;
    box-sizing: border-box;
    margin: 1em 2em;
    padding: 1em;
}
.citacao > p{
    position: relative;
}
.citacao p::before{
    content: '"';
    font-size: 10em;
    color:#bbb;
    line-height: .6;
    position: absolute;
    z-index: -1;
}
.citacao:nth-of-type(odd){
    float: right;
}
.citacao:nth-of-type(even){
    float: left;
}
.citacao:hover, .citacao:focus{
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.8);
}
.citacao:nth-of-type(odd):hover, .citacao:nth-of-type(odd):focus{
    transform: scale(1.2) rotate(5deg);
}
.citacao:nth-of-type(even):hover,.citacao:nth-of-type(even):focus{
    transform: scale(1.2) rotate(-5deg);
}
cite{
    float: right;
    font-style: italic;
}
.conteudo > p::first-letter{
    font-size: 2em;
    font-weight: bold;
    color: #3C1D3D;
    text-shadow: 1px 1px #000;
    margin-right: .2ch;
    line-height: 1;
}