| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Додати до текстових посиланнях, які посилаються на інші сайти, невеликий малюнок для ідентифікації.
Рішення
Зовнішніми називаються посилання, які ведуть на інший сайт. Щоб користувач міг відрізнити такі посилання від звичайних, до зовнішніх посиланнях додають невеликий малюнок (наприклад, такий 
), який інформує про те, що посилання на інший ресурс.
Для зміни стилю посилань створимо новий стильовий клас external і для нього додамо малюнок у вигляді фону за допомогою властивості background. При цьому слід вказати значення no-repeat, щоб фон не повторювався (приклад 1).
Приклад 1. Додавання зображення до посилань
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Зовнішні посилання</title>
<style>
a.external {
background: url(image/blank.png) no-repeat 0 5px;
padding-left: 13px;
}
</style>
</head>
<body>
<p><a href="link.html">Звичайне посилання</a></p>
<p><a href="https://html-css.co.ua/" class="external">Зовнішнє посилання</a></p>
</body>
</html>
Сам малюнок можна розташовувати ліворуч або праворуч від тексту. У даному прикладі показано розташування ліворуч (мал. 1), тому в якості значення background вводиться 0 5px, що означає положення від лівого верхнього кута. Щоб текст не накладався на малюнок, застосовується властивість padding-left, що додає поле зліва від посилання. Значення цієї властивості складається з ширини картинки і відстані від картинки до тексту.
Рис. 1. Вигляд посилання з малюнком зліва від тексту
Для завдання положення картинки праворуч від тексту, слід замінити у властивості background значення 0 на 100% і замість padding-left використовувати padding-right (приклад 2).
Приклад 2. Малюнок праворуч від посилання
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Зовнішні посилання</title>
<style>
a.external {
background: url(image/blank.png) no-repeat 100% 5px;
padding-right: 13px;
}
</style>
</head>
<body>
<p><a href="link.html">Звичайне посилання</a></p>
<p><a href="https://html-css.co.ua" class="external">Зовнішнє посилання</a></p>
</body>
</html>
Результат цього прикладу показано на рис. 2.
Рис. 2. Вигляд посилання з малюнком праворуч від тексту