Testo di stile per farlo apparire sopra la linea (per gli accordi sopra i testi)

Question

Mi piacerebbe essere in grado di mostrare accordi al di sopra dei testi in musica usando i CSS. Questo è quello che mi piacerebbe davvero che fosse:

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

in modo che le modifiche di accordo siano mostrate nei posti giusti. In HTML sembra che questo:

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

e sono riuscito a ottenere quasi l'effetto con questo stile:

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

Ma il problema è che ha lacune:

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

Se solo larghezza: 0 (che userei con overflow: visibile) lavorato su un intervallo incorporato. Qualcuno ha una soluzione?

Modifica: Risolto grazie a @Kyle Sevenoaks. Per chi è interessato, ecco il mio completo CSS, che permette ai versi da marcare con <p>, accordi per essere contrassegnati con <span> e se gli accordi sono indicate essere attivata con la classe show-chords sul div genitore:

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

Per gli elementi in linea, è possibile utilizzare display: inline-block; per accettare la larghezza. Ma per il tuo problema, perché non aggiungere semplicemente left: 3px; /*em or whatever*/? Lo indenterà.

Answer 2

Sì, position: relative riserva ancora lo spazio necessario.

Ecco una soluzione che avvolge una position: absolute arco attorno a quello posizionato in modo relativo, in modo che lo spazio non viene riservato più:

<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;} 

Il vantaggio rispetto alla L'approccio left prevede che questo funzioni per qualsiasi larghezza di accordo (si consideri Esus o F7.

JSFiddle here. Testato in IE6,7,8, Chrome 6

Answer 3

Qui è una variante utilizzando data-* attributi e :before pseudoclasse

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/