Зовнішніми називають посилання, які ведуть на інший сайт. Щоб користувач міг відрізнити такі посилання від звичайних, до зовнішніх посилань додають невеликий малюнок (наприклад, 
), який інформує про те, що посилання вказує на інший ресурс.
Адреса сайту починається з протоколу http://або https://, а також можна писати адресу без вказівки протоколу//. Як бачите, адреси сайтів містять дві косі риси, які можна вказати в селекторі таким чином.
a[href*=//] { … }</code> Цей запис читається так: застосувати стиль до елементів <a>, у яких атрибут href містить//.
Тепер для цього селектора додамо малюнок у вигляді фону за допомогою властивості background. При цьому слід вказати значення no-repeat, щоб фон не повторювався (приклад 1).
Приклад 1. Додавання малюнка до посилань
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Зовнішні посилання</title> <style> a[href*="//"] { background: url(/example/image/blank.png) no-repeat 0 50%; /* Параметри зображення */
padding-left: 13px; /* Відстань ліворуч */
}
</style>
</head>
<body> <p><a href="page/lorem.html">Звичайне посилання</a></p> <p><a href="http://htmlbook.ru">Зовнішнє посилання</a></p>
</body>
</html>Сам малюнок можна розташовувати ліворуч або праворуч від тексту. У цьому прикладі показано розташування зліва (рис. 1), тому як значення background вводиться 0 50%, що означає положення від верхнього лівого кута. Щоб текст не накладався на малюнок, застосовується властивість padding-left, що додає відстань ліворуч від посилання. Значення цієї властивості складається з ширини зображення та відстані від зображення до тексту.
Мал. 1. Вигляд посилання з малюнком зліва від тексту
Для завдання положення картинки праворуч від тексту, слід замінити у властивості background значення 0 на 100% і замість padding-left використовувати padding-right (приклад 2).
Приклад 2. Малюнок праворуч від посилання
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Зовнішні посилання</title> <style> a[href*="//"] { background: url(/example/image/blank.png) no-repeat 100% 50%; padding-right: 13px; }
</style>
</head>
<body> <p><a href="page/lorem.html">Звичайне посилання</a></p> <p><a href="http://htmlbook.ru">Зовнішнє посилання</a></p>
</body>
</html>Результат цього прикладу показаний на рис. 2.
Мал. 2. Вигляд посилання з малюнком праворуч від тексту