像歌曲一样自定义上标

Question

我想用HTML做一本歌本，比如

我想知道css代码（或类似代码）上的某些<sup>技巧是否可以轻松实现这一目标

<sup>F</sup>Yesterday <sup>Em7</sup>  all my <sup>A7</sup> troubles seemed so <sup>Dm</sup>far away <sup>Dm/C</sup>   

<sup>Bb</sup>now I <sup>C7</sup>need a place to <sup>F</sup>hide away <sup>C</sup>oh <sup>Dm</sup>I <sup>G7</sup>believe in <sup>Bb</sup>yes<sup>F</sup>terday

现在有两个问题：

1. 应该在<sup>标记中添加哪些调整才能使其正常工作？至少它必须更高，并且必须表现得好像根本没有占用任何空间（对于例如，'昨天'不应该分开）

2. 有没有比使用<sup>代码更好的技巧？

感谢您的所有意见

Answer 1

而不是sup，我建议在伪元素中使用数据属性span。

然后可以根据需要定位伪元素，并提供合适的行高，这一切都是相当动态的。

调整em和

中的所有内容

p {
  line-height: 2em;
  margin: 1em;
}
span {
  position: relative;
}
span::after {
  content: attr(data-note);
  display: inline-block;
  position: absolute;
  top: -2em;
  color: red;
  font-size: .75em;
  padding-right: 1em;
}

<p>
  <span data-note="F"></span>Yesterday <span data-note="Em7"></span>all my <span data-note="Dm"></span>troubles seemed so <span data-note="A7"></span>far away
  <br><span data-note="Bb"></span>  <span data-note="Bb"></span>now I <span data-note="C7"></span>need to find a place to <span data-note="F"></span>hide away <span data-note="C"></span>oh <span data-note="Dm"></span>I beli<span data-note="G7"></span>eve in yes<span data-note="Bb"></span>terday
</p>

由于跨度是空的，因此屏幕阅读器应该没有问题（尽管我不确定屏幕阅读器是否读取了content。