Как сверстать ссылку с иконкой справа?

Question

[r_g_b_a]

Несмотря на кажущуюся простоту вопроса мне не удалось решить задачу, по крайней мере с условиями, описанными ниже.
https://jsfiddle.net/dkuv54ps/
Что я подразумеваю под фразой "ссылку с иконкой справа":
1. Это именно "ссылка", а не "кнопка" (с поведением, присущим display: inline). То есть на примере выше фон должен быть только у текста с иконкой, пустое место не должно как закрашиваться, так и срабатывать на :hover.
2. Иконка всегда должна находится справа от текста в не зависимости от ширины дисплея.
3. Между самой длинной строкой и иконкой по горизонтали не должно быть отступа.

Реально ли такое сделать только на css?

UPD: Еще один пример, так как многих мое описание запутало. Нужно поведение точно как тут https://jsfiddle.net/kx9bc842/, но иконка должна выводится справа.
Как можете заметить, :hover срабатывает только на тексте/иконке. Иконка вне зависимости от ширины родительского блока всегда находится сбоку рядом с текстом, с небольшим отступом.

Comments

[xdevelx]

Я ничего не понял, что вам в итоге нужно. Но давайте от обратного, что в этой реализации не так?

https://codepen.io/xdevelx/pen/wvMMMwZ

[r_g_b_a]

xdevelx, Второй пункт не выполняется. Если уменьшите ширину рабочей области чуть меньше, чем длина строки, то заметите, что стрелочка опускается под текст.

[xdevelx]

r_g_b_a,

Если уменьшите ширину рабочей области чуть меньше, чем длина строки, то заметите, что стрелочка опускается под текст.

При такой реализации svg никогда не переносится - всегда справа от текста.

[r_g_b_a]

Извините, сначала не глянул ссылку и подумал что вы спрашиваете на примере того кода, что я писал на jsfiddle.

Конкретно в данном примере когда текст ссылки идет в две строки, появляется пустая кликабельная область, а иконка уходит далеко вправо от текста. С красным фоном это хорошо видно.

Answer 1

[Пащук Илья]

Да можно вот https://jsfiddle.net/hops2g5y/3/
Еще можно иконку вставить в через икон шрифт или через бекграунд, маск или content используя только after

Comments

[r_g_b_a]

В вашем примере текст не переносится на новую строку.