CSS: После ссылки происходит нежелательный разрыв линии ⇐ CSS

[Anonymous]

У меня есть следующие CSS, применяемые к ссылкам: < /p>

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

a[href^="https://" i]::after, a[href^="http://" i]::after
{
content: url(external-link.svg);
}
< /code>
К сожалению, в одном случае, когда нет пробелов, следуя по ссылке, только полная остановка ». Сразу же после после того, как при рядом со ссылкой есть уродливый разрыв линии перед полной остановкой, поэтому полная остановка появляется в начале следующей строки. Происходит в Firefox на моем iPad Pro 13 ". Проблема, затрагивая любую нормальную ссылку, а не только те, кто не имеет :: после 

.a {
text-decoration: underline;
text-decoration-color: #ccf;
font-style: normal;
color: var( --link-color );
background-color: transparent;
border: 1px solid transparent
}
< /code>
Граница существует, чтобы я мог покраснеть, когда ссылка выделена, выбранной путем вкладок или в то время как она находится в состоянии увольнения. Это предотвращает нежелательное увеличение размера связи с чрезвычайно уродливым сдвигом макета, когда ссылка попадает в состояние, упомянутое выше. Но я не вижу, как это поощряет нежелательные разрывы линий. < /P>
html body a:hover,
html body a:active,
html body a:focus
{
border: 1px solid red;
padding: 0 1px;
margin: 0 -1px;
text-decoration-color: var( --link-color );
}
< /code>
Может ли кто -нибудь предложить исправление? Или прокомментировать поведение текущих двигателей рендеринга в веб -браузерах в целом?

Подробнее здесь: https://stackoverflow.com/questions/796 ... eak-occurs