Estoy tratando de agregar acordes de guitarra sobre el texto, al igual que enesta pregunt. Si bien esa técnica funciona en la mayoría de los casos, me gustaría extenderla para que también funcione en la siguiente situación, donde los acordes se superponen:

p {
 margin-top:50px;
}
span.chunk {
 position:relative;
}
span.chunk:before {
  content:attr(data-chord);
  position:absolute;
  top:-15px;
}

<p>
As
<span class="chunk" data-chord="C">I was going over the</span> 
<span class="chunk" data-chord="Am">f</span>
<span class="chunk" data-chord="B">ar</span>
</p>

El resultado final debería simplemente empujar todo el fragmento, así:

¿Hay alguna manera de lograr esto, preferiblemente usando solo CSS?