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

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>

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