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

For inline elements, you can use display: inline-block; to have it accept width. But for your problem, why not simply add left: 3px; /*em or whatever*/? It will indent it.

Answer 2

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:

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

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

Answer 3

Here is a variant using data-* attributes and :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/