Use a zero-width, no-break space to make your external link icons wrap with the link text. Even if you use display: inline, the icon won't wrap on Safari (although it will on Chrome and other browsers, which is confusing).
<div>
<p>Here is a paragraph with <a href="https://example.com/" class="external">a super amazing link</a>, no way!</p>
</div>.external::after {
/* Use this zero-width, no-break space */
content: "\FEFF";
/* Icon Credit: https://remixicon.com/icon/external-link-line */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgb(0,0,255)'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z'%3E%3C/path%3E%3C/svg%3E");
background-position: center;
background-size: cover;
padding-right: 18px;
white-space: nowrap;
display: inline;
}
div {
border: 2px solid #FF0000;
padding: 10px;
width: 300px;
resize: both;
overflow: auto;
}falseResult
For full transparency, ChatGPT helped a bit when coming up with the above solution.