Make selector contribute to element width

Question

I am trying to add guitar chords above text, just like in this question. While that technique works in most cases, I would like to extend it to also work in the following situation, where the chords overlap:

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>

The end result should simply push the whole chunk over, like this:

Is there a way I can accomplish this, preferably using just CSS?

2

oh I remember this :p – Temani Afif May 15 '18 at 21:05

Temani Afif · Accepted Answer · 2018-05-15T21:17:07.327

Here is an idea using flexbox. The trick is to make the span an inline-flex container with a column direction so we keep the pseudo-element in-flow; thus it will affect the width of the container.

The widest one between the current content and the pseudo element will define the width.

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;
}

<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>

@sol yes too slow :p by the way you had a small issue by adding flex to the `p`, you will break the copy paste of text. it's was the issue of his old question btw .... and I suppose you already saw the featured question for this issue : https://stackoverflow.com/questions/27970957/flexbox-adding-newline-to-clipboard — Temani Afif, May 15 '18 at 21:39

score 0 · Answer 2 · answered May 15 '18 at 21:13

0

You can use :after pseudo-element and position:relative instead.

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>

answered May 15 '18 at 21:13

Amr Noman

2,597
13
24

Yeah, didn't notice – Amr Noman May 15 '18 at 21:19

Make selector contribute to element width

2 Answers2

Linked