Avoid line wrap between ::before pseudo-element and next word

The problem

I use ::before to generate a pseudo-element to display a small image left of the anchor text of links. However, when re-sizing the browser window's width, the line may become wrapped between the small image and the first word of the link anchor text, which is undesired.

Desired result

I want to keep the small image and the first word of the link anchor text together on the same line.

I keep display: inline on the a-tag because the link anchor text shall be able to wrap line, not as a whole atomic box, but so that its first word(s) fill up the current line and any remaining words continue on the next line.

Also, the text after the link shall continue on the same line as the last word of the link anchor text (provided there is space for its first word of course).

Note 1) If I would use display:inline-block on the a-tag, the entire link anchor text would wrap as a whole, which I do not want.

Note 2) I use display:inline-block on the pseudo-element because I need to set its width and height.

Note 3) I have tried with setting white-space: pre on the pseudo-element, but that did not solve the problem.

Thanks!

The code

The code is at JSFiddle and repeated below for completeness.

My HTML:

<p>
Text text <a class="pre-icon" href="#">FirstWord word2 word3</a> text after link.
</p>

My CSS:

.pre-icon::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 10px;
    background-color: transparent;
    background-image: url(data:image/gif;base64,R0lGODlhBgAKAJEAADM2Zv///////wAAACH5BAUUAAIALAAAAAAGAAoAAAINBIRimdvHFETOUWglKwA7);
    background-repeat: no-repeat;
    margin-left: .13em;
    margin-right: .25em;
    white-space: nowrap;
}

Solution

The problem is that the line break happens between the pseudo-element and the content, so you can't avoid it by setting white-space only to the pseudo-element.

Instead, you can wrap the content of the anchor inside a span, set white-space: nowrap to the entire anchor, and restore the initial white-space: normal in the span.

.pre-icon {
  white-space: nowrap;
}
.pre-icon > span {
  white-space: normal;
}

.pre-icon::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 10px;
  background-color: transparent;
  background-image: url(data:image/gif;base64,R0lGODlhBgAKAJEAADM2Zv///////wAAACH5BAUUAAIALAAAAAAGAAoAAAINBIRimdvHFETOUWglKwA7);
  background-repeat: no-repeat;
  margin-left: .13em;
  margin-right: .25em;
}
.pre-icon {
  white-space: nowrap;
}
.pre-icon > span {
  white-space: normal;
}

Text text <a class="pre-icon" href="#"><span>FirstWord word2 word3</span></a> text after link.