相关疑难解决方法(0)

我希望能够使用CSS在音乐歌词上方显示和弦.这就是我真正喜欢它的样子:

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

如果只有宽度:0(我将使用overflow:visible)在内联跨度上工作.有没有人有办法解决吗？

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

p.song span {
  display: none;
}
p.song.show-chords p {
  line-height:2.3em;
  margin-bottom:2em;
}
p.song.show-chords span …