html – 设计文字,使其出现在线上方(歌词上方的和弦)

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

使和弦变化显示在正确的地方.在HTML中,它看起来像这样：

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

我设法几乎得到了这种风格的效果：

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

但问题是它有差距：

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

如果只有width：0(我将使用overflow：visible)工作在一个内联的跨度.有没有人有解决方案？

编辑：谢谢@Kyle Sevenoaks.对于任何有兴趣的人来说,这是我的完整的CSS,它允许经文标注< p>,和弦标记为< span>以及是否显示和弦是否与父div上的show-chords类切换：

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>