Настройка Надстрочные как в песенник

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 читаются