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