选择器有助于元素宽度

Question

我正在尝试在文字上方添加吉他和弦，就像在this question中一样。虽然这种技术在大多数情况下都有效，但我想将它扩展到以下情况，即和弦重叠：

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">f</span>
<span class="chunk" data-chord="B">ar</span>
</p>

最终结果应该简单地推动整个块，如下所示：

有没有办法可以实现这一点，最好只使用CSS？

Answer 1

这是使用flexbox的想法。诀窍是使跨度为inline-flex容器的列方向，以便我们保持伪元素流入;因此它会影响容器的宽度。

当前内容和伪元素之间最宽的一个将定义宽度。

＆＃13;

＆＃13;

p {
  margin-top: 50px;
}

span.chunk {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  vertical-align: bottom; /*This is mandatory to keep the text without chunk in the bottom*/
}

span.chunk:before {
  content: attr(data-chord);
  position: relative;
}

＆＃13;

<p>
  As
  <span class="chunk" data-chord="CCC">I was going over the</span>
  <span class="chunk" data-chord="Am a long text">f</span> 
  more text here
  <span class="chunk" data-chord="BB">ar</span>
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用:after伪元素和position:relative代替。

p {
 margin-top:50px;
}
span.chunk {
 position:relative;
}
span.chunk:after {
  content:attr(data-chord);
  position:relative;
  margin-left: -1ex;
  top:-15px;
}

<p>
As
<span class="chunk" data-chord="C">I was going over the</span> 
<span class="chunk" data-chord="Am">f</span>
<span class="chunk" data-chord="B">ar</span>
</p>