Estilo de texto para que aparezca encima de la línea (para los acordes sobre la letra)

Question

Me gustaría poder mostrar los acordes sobre las letras en música usando CSS. Esto es lo que realmente me gustaría que se vea:

C           F 
This line has a C chord, and it also has an F chord 

para que los cambios de acordes se muestren en los lugares correctos. En HTML se parece a esto:

<span class="chord">C</span>This line has a C chord, and it also has an <span class="chord">F</span>F chord 

Y logró casi conseguir el efecto con este estilo:

.chord { 
    position: relative; 
    top: -1em; 
} 

Pero el problema es que tiene lagunas:

C           F 
This line has a C chord, and it also has an F chord 

Si only width: 0 (que usaría con overflow: visible) trabajó en un tramo en línea. ¿Alguien tiene una solución?

Edit: Resuelto gracias a @Kyle Sevenoaks. Para cualquiera que esté interesado, aquí está mi CSS completa, que permite a los versos para ser marcados con <p>, acordes a estar marcados con <span> y si se muestran acordes a ser fijada con la clase show-chords en el div padre:

p.song span { 
 
    display: none; 
 
} 
 
p.song.show-chords p { 
 
    line-height:2.3em; 
 
    margin-bottom:2em; 
 
} 
 
p.song.show-chords span { 
 
    position: relative; 
 
    top: -1em; 
 
    display:inline-block; 
 
    width: 0; 
 
    overflow:visible; 
 
    text-shadow:#CCC -1px 1px; 
 
    color:#00F; 
 
    font-weight:bold; 
 
    font-family:Arial, Helvetica, sans-serif; 
 
}

<p class="song show-chords"> 
 
    <span class="chord">C</span>This line has a C chord, and it also has an <span class="chord">F</span>F chord 
 
</p>

Answer 1

Para los elementos en línea, puede usar display: inline-block; para que acepte el ancho. Pero para su problema, ¿por qué no simplemente agrega left: 3px; /*em or whatever*/? Lo sangrará.

Answer 2

Sí, position: relative aún se reserva el espacio necesario.

Aquí es una solución que se ajusta un lapso de position: absolute alrededor de la posición relativa, por lo que el espacio no quede reservada más:

<span class="chord"> 
    <span class="inner">C</span> 
</span>This line has a C chord, and it also has an 
<span class="chord"> 
    <span class="inner">F</span> 
</span>F chord 

CSS:

.chord { position: absolute 
} 

.chord .inner { position: relative; 
    top: -1em;} 

La ventaja sobre la left enfoque es que esto funcionará para cualquier ancho de cuerda (piense en Esus o F7.

JSFiddle here. Probado en IE6,7,8, Chrome 6

Answer 3

Aquí es una variante utilizando data-* atributos y :before pseudoclass

HTML:

<span data-chord="C">T</span>his line has a C chord, and it 
also has an <span data-chord="F">F</span> chord 

CSS:

span[data-chord]:before { 
    position : relative; 
    top   : -1em; 
    display  : inline-block; 
    content  : attr(data-chord); 
    width  : 0; 
    font-style : italic; 
    font-weight : bold; 
} 

http://jsfiddle.net/fcalderan/4wKkp/