Javascript 在Web上对齐吉他和弦

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

我想出了以下解决办法（ ):

HTML:

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

As CI was going over theAmfar fam'd Kerry Mountains

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

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

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

---

编辑：面向子孙后代，如果这个答案有用，您一定要查看一下

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

p{
边缘顶部：50px；
}
span.chunk{
位置：相对位置；
}
span.chunk:之前{
内容：attr（数据弦）；
位置：绝对位置；
顶部：-15px；
}

作为
我正在看报纸
遥远的克里山脉，

As CI was going over theAmfar fam'd Kerry Mountains

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