像在歌曲簿中一样自定义上标

Question

我想在 HTML 中做一个歌集，比如

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

<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

现在两个问题：

应该在 <sup> 标签中添加哪些调整才能使其生效？ 至少它必须更高并且必须表现得像它一样完全没有占用space（比如'yesterday'不应该被分割）
有没有比使用 <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>

由于 span 是空的屏幕阅读器应该不会有问题（尽管我不确定 content 是否被屏幕阅读器读取。

像在歌曲簿中一样自定义上标

Customize Superscript as in Songbook

html

css

appearance