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

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

C F

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

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

CThis line has a C chord,and it also has an FF 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;

}

CThis line has a C chord,and it also has an FF chord