How to prevent ::before / ::after elements influencing the breaking behaviour of spans?

Since there are no spaces in between the <span> elements, I expect them not to wrap but all sit on the same line, which seems to be the case in all browsers

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

span {
  position: relative;
}

<!-- language: lang-html -->

<span>Fooooooooooooooooooooooooooooooooooooooooooooooooo</span><span>foo</span><span>Baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaar</span><span>bar</span>

<!-- end snippet -->

But when adding a ::before tooltip element this behaviour changes. While they stay on the same line in Firefox (114), they start wrapping in Safari (16) and Chrome (114).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

span {
  position: relative;
}

span::before {
  content: 'tooltip';
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background: grey;
  color: white;
  transition: opacity 100ms;
}

span:hover::before {
  opacity: 100;
}

<!-- language: lang-html -->

<span>Fooooooooooooooooooooooooooooooooooooooooooooooooo</span><span>foo</span><span>Baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaar</span><span>bar</span>

<!-- end snippet -->

Why is that and is there a way to prevent it?

Different display options on the ::before elements didn't have an effect.

But I just noticed that setting inline-block on the spans actually seems to have the same effect as adding the ::before element

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

span {
  position: relative;
  display: inline-block;
}

<!-- language: lang-html -->

<span>Fooooooooooooooooooooooooooooooooooooooooooooooooo</span><span>foo</span><span>Baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaar</span><span>bar</span>

<!-- end snippet -->

Is there a logical explanation for the wrapping, or can this be considered unexpected behaviour?

Since in the real example there are whitespaces which should break, wrapping everything in a white-space: nowrap; container isn't an option.

Here's an example with whitespaces where FoooooooBaaaaaaar should stay together and not split into two lines

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

span {
  position: relative;
}

span::after {
  content: 'tooltip';
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background: grey;
  color: white;
  transition: opacity 100ms;
}

span:hover::after {
  opacity: 100;
}

<!-- language: lang-html -->

<span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span>

<!-- end snippet -->

While the abstract examples already illustrate the problem, here's also a more realistic one: Given a sentence that contains special characters such as quotation marks and parentheses, and words that are a combination of two words. For styling purposes, and because the words have a translation tooltip, everything is split into span elements.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

span {
  position: relative;
}

.word::after {
  content: 'tooltip';
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background: grey;
  color: white;
  transition: opacity 100ms;
}

.word:hover::after {
  opacity: 100;
}

<!-- language: lang-html -->

This is an "example sentence" containing a comboword and also something in (parenthesis).<br><br>

<span class="word">This</span><span class="char"> </span><span class="word">is</span><span class="char"> </span><span class="word">an</span><span class="char"> </span><span class="char">"</span><span class="word">example</span><span class="char"> </span><span class="word">sentence</span><span class="char">"</span><span class="char"> </span><span class="word">containing</span><span class="char"> </span><span class="word">a</span><span class="char"> </span><span class="word">combo</span><span class="word">word</span><span class="char"> </span><span class="word">and</span><span class="char"> </span><span class="word">also</span><span class="char"> </span><span class="word">something</span><span class="char"> </span><span class="word">in</span><span class="char"> </span><span class="char">(</span><span class="word">parenthesis</span><span class="char">)</span><span class="char">.</span>

<!-- end snippet -->

Usually there wouldn't be a break between the special characters and the word next to it or in betweeen the comboword, but with the ::after element that's the case.

I was reading the specs here and it says that:

> Out-of-flow elements and inline element boundaries do not introduce a
> forced line break or soft wrap opportunity in the flow.

Apparently, position: absolute elements as well as </span><span> should not generate a soft wrap; Chromimum based browsers are doing it wrong!

The article further states that:

> For Web-compatibility there is a soft wrap opportunity before and
> after each replaced element or other atomic inline, even when adjacent
> to a character that would normally suppress them, such as U+00A0
> NO-BREAK SPACE.

So display: inline-block elements could generate a soft wrap.

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-css -->

body {
  font: medium monospace;
}
.test > span:nth-child(odd) {
  background-color: #FC0;
}
.test > span:nth-child(even) {
  background-color: #CF0;
}
.test-1 > span {
  position: relative;
}
.test-1 > span::before {
  content: "tooltip";
  position: absolute;
  left: 0;
  top: 0;
  color: #FFF;
  background-color: rgb(0, 0, 0, .65);
}
.test-2 > span {
  display: inline-block;
}

<!-- language: lang-html -->

<h1>position: absolute<br>should not wrap</h1>
<p class="test test-1"><span>Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span><span>Bbbbbbbbbbbbbbbbbbbb</span><span>Cccccccccccccccccccccccccccccc</span><span>Dddddddddddddddddddddddddddddddddddddddddddddddddd</span></p>

<h1>display: inline-block<br>should wrap</h1>
<p class="test test-2"><span>Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span><span>Bbbbbbbbbbbbbbbbbbbb</span><span>Cccccccccccccccccccccccccccccc</span><span>Dddddddddddddddddddddddddddddddddddddddddddddddddd</span></p>

<!-- end snippet -->

Elements that are set to position:absolute are treated as block elements.

The description is here mdn/position and further linked there mdn/block formatting context (BFC)

The problem is not the pseudo-element. The chrome inspector confirms display:block for position:absolute at :before under "Computed", whereas Firefox does not seem to assign a "display" attribute.

Unfortunately I don't have a 100% CSS solution. One approach would be to work with display:none/block so that the line breaks are the same in all browsers. With display:block and and to transfering some sytles to hover you unfortunately lose the opacity transition effect and the line behaves strange if there is a tooltip at the beginning of the line.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

span {
  position: relative;
}

span::after {
  display: none;
}

span:hover::after {
  display: block;
  content: 'tooltip';
  position: absolute;
  left: 0;
  top: 0;
  background: grey;
  color: white;
  transition: opacity 100ms;
}

<!-- language: lang-html -->

<span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span>

<!-- end snippet -->

You probably won't get around a javascript solution, where you then determine positions and set a (more global) tooltip relative to the spans parent element.

<div style="white-space: nowrap;">
  <span>Fooooooo</span><span>Baaaaaaar</span> <span>Fooooooo</span><span>Baaaaaaar</span> ...
</div>

This will prevent the spans from wrapping to the next line.

<div style="white-space: nowrap;">
  <span class="word">This</span><span class="char"> </span><span class="word">is</span> ...
</div>

By setting white-space: nowrap; on the containing element, you can prevent wrapping even when using ::after elements or having whitespaces in the content.