我想用 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
现在两个问题:
应将哪些调整添加到
<sup>
标签让它起作用?至少它必须更高,并且必须表现得好像它根本不占用空间(例如,“昨天”不应该被分割)有比使用
<sup>
更好的技巧吗?标签?
谢谢大家的意见
最佳答案
与其使用 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
。
关于html - 像在歌曲簿中一样自定义上标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37616356/