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

Question

Учитывая следующий пример: http://cl.ly/2UAa

Как использовать спрайт в правой части строки «увидеть больше ...», чтобы он всегда корректировался по ширине текста? Должен ли я создать отдельный элемент, который будет плавать с текстом, или есть способ сделать это непосредственно в ссылке.

Answer 1

Вы можете применить его к фону ссылки, выровнять по правому краю и дать ссылке правильный отступ.

a {
    background: url(image_url) no-repeat right center;
    padding-right: 80px;    // 80 pixels example
}

Answer 2

Мой любимый метод - использовать псевдоэлемент и установить изображение как контент;

a:after {
    content: url(path/to/image.png);
}

Вы также можете создать псевдоэлемент перед элементом или использовать текст вместо изображения в качестве контента;

a:before {
    content:' \25BA';
}

\ 25BA - это управляющий символ CSS для стрелки, указывающей вправо, но вы можете поместить любой текст в кавычки.

Конечно, вы также можете использоватьфоновый метод, как предложил jeroen, и оба метода полезны для разных ситуаций.