Pseudo element with content changing wrapping only in Safari

Question

In safari (both desktop and IOS), having a ::before pseudo element with generated content, changes the wrapping in the main element.

This question seems to be about something similar and refers to an issue that was fixed in Chrome: erratic line wrapping with after pseudo-element.

In my case I have an emsp between two no-wrap spans, and all seating in a div. Adding the ::before pseudo element to the div, causes Safari not to wrap. However adding a newline after the emsp, seems to fix the Safari issue. As all of this seems very erratic, I would like to better understand when and why such an issue may happen in Safari. Also, I was not able to find a webkit bug about this.

span {
  white-space: nowrap;
}

.before::before {
content: '*';
}

<div>

<p>without before:</p>
<span>first long span that should not wrap</span>&emsp;<span>second long span that should not wrap</span>
</div>

<br><br>

<p>with before:</p>
<div class="before">
<span>first long span that should not wrap</span>&emsp;<span>second long span that should not wrap</span>
</div>

<br><br>

<p>with before and a newline after the emsp:</p>
<div class="before">
<span>first long span that should not wrap</span>&emsp;
<span>second long span that should not wrap</span>

</div>

Firefox / chrome:

Safari: