Adding a word break between a text node and span in existing markup (CSS only)

Issue

As per title, I need a CSS-only solution to word break a text node and an inline element.

This is what it looks like: the left padding is split by the word break in the :before content. I obviously need to have the word break go before the before so the left padding is reunited with the rest of the element.

I'm injecting CSS into an existing app to pretty it up, so changing the HTML/generated HTML is a no-go.

I've tried all manner of break-before, different content white space characters, display: absolute, etc.

Repro here: https://jsfiddle.net/xf4y98ae/

Thanks.

.container {
  width: 100px;
  border: 1px solid grey;
}

.badge {
  margin-left: 4px;
  background-color: grey;
  padding: 2px 6px;
}

.badge:before {
  content: ' ';
}

<div class="container">
  <h3 class="title">
    Title text<span class="badge">Badge</span>
  </h3>
</div>

Solution

You can use the display properties

.badge {
  display: inline-block;
}

Elements with badge classes will be considered as distinct sections.

Answered By - EveryHongCha