JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
   <a class="after" href="#">The icon should not break alone</a>
</div>

<div id="wrapper">
   <a href="#">The icon should not break <span class="nobr">alone</a><span class="after"></span></span>
</div>

Desired result:
<div id="wrapper">
   <a href="#">The icon should not break<bR>alone</a><span class="after"></span>
</div>

CSS

#wrapper {
    width: 200px;
    background-color: #fee;
    margin-bottom: 10px
}

a.after:after {
    content: url('http://doc.qt.digia.com/main-snapshot/images/used-in-examples/widgets/tooltips/images/square.png');
    padding-left: 4px;
}

span.after {
    content: url('http://doc.qt.digia.com/main-snapshot/images/used-in-examples/widgets/tooltips/images/square.png');
    padding-left: 4px;
}

.nobr {
    white-space: nowrap
}