Styling text to make it appear above the line (for chords above the lyrics)

Question

I\'d like to be able to show chords above the lyrics in music using CSS. This is what I\'d really like it to look like:

C                                                 


        

Answer 1

Yeah, position: relative still reserves the space needed.

Here is a solution that wraps a position: absolute span around the relatively positioned one, so that the space does not get reserved any more:

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

CSS:

.chord { position: absolute
 }

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

The advantage over the left approach is that this will work for any chord width (think Esus or F7.

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