Javascript 如何使用CSS+；HTML？

我们作为一个团队，以or-语法为文本文件编写解析器，并将其呈现为html。您可以在找到源代码

它工作得很好，但现在我们希望尽可能地呈现纯html。为此，我们希望使用css。到目前为止，我们找到了一个解决方案，您可以在JSFIDLE上观看。对于和弦，我们使用

E
.chord{
位置：绝对位置；
字体大小：13px；
字体大小：粗体；
颜色：红色；
}
和弦{
位置：相对位置；
顶部：-1米；
}

现在我们有一个问题，那就是歌曲结尾的和弦没有正确显示，因为下面的和弦之间没有线条文本。弦应显示为H E Asus2

是否有可能用CSS解决这个问题，或者我们需要通过检查sond中的元素来“强制”使用java解决方案

---

您有解决方案吗？

也许这不是您需要的，但我的想法是您可以使用

：：before

伪元素，而不是

D

歌词{
线高：3em；
字体系列：“世纪哥特式”，世纪哥特式，AppleGothic，无衬线；}
.歌词跨度{
位置：相对位置；
/*边框：1px纯红*/
}
.歌词span：：之前{
内容：attr（数据弦）；
位置：绝对位置；
字体大小：粗体；
底部：2米；
左：0；
文本对齐：居中；
颜色：红色；
宽度：100%；
/*边框：1px纯绿色*/
}

---

1。我只能想象当我走在你身边时会是什么样子。

Java还是javascript？差别很大。我猜我在这里被搞糊涂了，我习惯于看到歌词下面的和弦，而不是上面的和弦。不过，我觉得它很可读。为什么不在同一个和弦中使用它们呢？@G-Cyr检查最后一个，有3个重叠哦，是的，没有歌词，你的绝对音程写在同一个地方。在我的评论中加入了类似的想法，你也可以使用我的钢笔@G-Cyr是的，但它在顶部而不是底部：p@TemaniAfif正如我所评论的，这是我习惯的阅读方式；）（从未有过老师……只是在消防营地接电话）

<span class="chord"><span class="inner">E</span></span>

.chord { 
   position: absolute;
   font-size: 13px;
   font-weight: bold;
   color: red;
 }

 .chord .inner {
   position: relative;
   top: -1em;
 }