在网络上对齐吉他和弦

Question

我正在尝试找出一种在网络上以可变宽度字体显示吉他和弦的好方法，如果可能的话最好只使用 HTML 和 CSS。我试图通过将和弦排列在特定字母上方来做到这一点。

我想出了以下解决方案（ https://jsfiddle.net/u33v87ob/）：

HTML：

<div class="chunk">
  <span class="chord"></span>
  <br>
  <span class="lyric">As&nbsp;</span>
</div>
<div class="chunk">
  <span class="chord">C</span>
  <br>
  <span class="lyric">I was going over the&nbsp;</span>
</div>
<div class="chunk">
  <span class="chord">Am</span>
  <br>
  <span class="lyric">far fam'd Kerry Mountains,</span>
</div>

CSS：

.chunk {
  float: left;
}

从显示的角度来看，这非常有效。然而，搜索引擎是这样读取的，这意味着我失去了歌词的搜索结果：

As CI was going over theAmfar fam'd Kerry Mountains

尝试复制+粘贴也会导致输出乱码。我宁愿复制的文本看起来像：

CAm
As I was going over the far fam'd Kerry Mountains,

有什么方法可以实现这个目标吗？

编辑：对于后代，这里是原始问题的扩展，您一定要检查一下这个答案是否有帮助！

Answer 1

为什么不简单地依赖伪元素和数据属性：

p {
 margin-top:50px;
}
span.chunk {
 position:relative;
}
span.chunk:before {
  content:attr(data-chord);
  position:absolute;
  top:-15px;
}

<p>
As
<span class="chunk" data-chord="C">I was going over the</span> 
<span class="chunk" data-chord="Am">far fam'd Kerry Mountains,</span></p>