在网络上对齐吉他和弦答案

【问题标题】：Align Guitar Chords on Web在网络上对齐吉他和弦
【发布时间】：2018-10-10 01:15:59
【问题描述】：

我正在尝试找出一种在网络上以可变宽度字体显示吉他和弦的好方法，如果可能的话，最好只使用 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,

有什么方法可以做到这一点吗？

编辑：为了后代，here is an extension on the original question 你一定要看看这个答案是否有帮助！

【问题讨论】：

标签： javascript html css seo

【解决方案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>

【讨论】：