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

Here is a variant using data-* attributes and :before pseudoclass

HTML:

This line has a C chord, and it 
also has an F 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/