Предотвращение разрыва линии вокруг CSS :: после содержимого изображения ⇐ Html

[Anonymous]

У меня есть следующий CSS, используемый для суффикса небольшого значка SVG после каждого текста ссылки: < /p>


:any-link::after {
content: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z' fill='blue' /%3E%3C/svg%3E");
;
}

p {
border: solid;
width: 16ch;
overflow: scroll;
resize: both;
}< /code>

Код: Выделить всё

Text with
[url=#]short link[/url]
and
[url=#]some longer link[/url]. (←Full stop.)
And even
[url=#]very verbose link text[/url].
And
[url=#]last link[/url]!

Мой вопрос: как мне предотвратить линейный разрыв/line-wrap/word-wrap между … элемент и маленький значок SVG, который следует за ним, где только значок остается на следующей линии? :: после ссылки, завернутой в следующую строку ». src = "https://i.sstatic.net/aamg348j.png"/>
Я также получаю очень похожую проблему с полной остановкой, следуя по ссылке, оставляя только полную остановку на следующей строке:


Подробнее здесь: https://stackoverflow.com/questions/797 ... ge-content