Что является стандартным способом добавить значок в ссылку с помощью CSS?

Question

Я привык использовать padding + background-image, чтобы разместить значок рядом со ссылкой.

Есть много примеров такого подхода. Вот один из здесь :

 <a class="external" href="http://www.othersite.com/">link</a>

  a.external {  
     padding-right: 15px;  
     background: transparent url(images/external-link-icon.gif) no-repeat top right;  
 }    

Но большинство браузеров не печатают фоновое изображение, что раздражает.

Что такое стандарт для размещения значка рядом со ссылками, который семантически правильный и работает во всех случаях?

---

EDIT

А как насчет CSS :before и :after? Это рекомендуемая практика?

a.test:after {
    padding-right: 5px;
    content: url(../pix/logo_ppk.gif);
}

Answer 1

Я бы лично добавил его и вставил фоновое изображение через класс CSS (как в вашем примере).Это, безусловно, самый легкий маршрут, он сохраняет документ легким и семантическим.

Если их печать действительно имеет значение (и я имею в виду действительно имеет значение ), вставьте туда реальное изображение, но помните, чтоэто действительно испортит разметку из семантического аспекта.

Возможно, лучшим компромиссным решением было бы иметь «версию для печати», которая вместо этого использует изображения (либо по размеру сервера, либо по некоторому JS, который заменяет класс CSS нареальное изображение.

Answer 2

Хотя, как говорят в OLi, сохранить значок в CSS - лучший способ, и нет способа напечатать фон CSS.(пока вы не включили фоновую печать css из настроек браузера).

, но если вы можете использовать javascript, то этот метод будет работать для вас

http://www.learningjquery.com/2008/08/quick-tip-dynamically-add-an-icon-for-external-links

вы можете добавитьвстроенное изображение для ссылки.