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

so that the chord changes are shown in the right places. In HTML it looks like this:

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

And I managed to nearly get the effect with this styling:

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

But the problem is that it has gaps:

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

If only width:0 (which I would use with overflow:visible) worked on an inline span. Does anyone have a solution?

Edit: Solved thanks to @Kyle Sevenoaks. For anyone who's interested, here's my complete CSS, which allows verses to be marked with <p>, chords to be marked with <span> and whether chords are displayed to be toggled with the show-chords class on the parent div:

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>