Посилання є звичайним текстом, що веде на інший сайт. За текстом посилання та її виду зазвичай не можна визначити, якою мовою відкриється веб-сторінка. Навіть адреса сайту не є помічником у цьому питанні — habr.com може вести на російськомовний ресурс.> додається атрибут hreflang з кодом мови. Однак браузери ніяк не використовують цей атрибут, в результаті посилання з hreflang і без нього виглядає абсолютно однаково. Тим не менш, атрибут hreflang можна використовувати для стилізації посилань за його значенням. Наприклад, селектор a[hreflang="ru"] вибере посилання на російськомовні ресурси, а a[hreflang="en"] — на англомовні.
У прикладі 1 до посилань на англомовні ресурси додається іконка з британським прапором через властивість background. Інші посилання не виділяються.
Приклад 1. Іконка у англомовних посилань
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hreflang</title> <style> a[hreflang="en"] { /* Параметри зображення */
background: url(/example/image/flag_en.png) no-repeat 100% 50%; /* Резервуємо порожній простір праворуч для картинки */
padding-right: 30px; }
</style>
</head>
<body> <p><a href="https://www.android.com/intl/ru_ru/">Android</a> — Офіційний сайт.</p> <p><a href="https://www.android.com/intl/en_us/" hreflang="en">Android</a> — official website.</p>
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Вигляд посилання з іконкою
Крім іконки до тексту посилання можна додати будь-який текст через псевдоелемент ::after та властивість content. У прикладі 2 у посилань на англомовні ресурси пишеться текст «(англ.)».
Приклад 2. Текст у англомовних посилань
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hreflang</title> <style> a[hreflang="en"]::after { content: " (англ.)"; /* Текст */
font-size: 0.8em; /* Розмір тексту */
color: #666; /* Колір тексту */
}
</style>
</head>
<body> <p><a href="https://www.android.com/intl/ru_ru/">Android</a> — Офіційний сайт.</p> <p><a href="https://www.android.com/intl/en_us/" hreflang="en">Android</a> — official website.</p>
</body>
</html>Результат цього прикладу показаний на рис. 2. Додатково змінюємо розмір та колір тексту, що виводиться через content. Зверніть увагу, що цей текст є частиною посилання, тому по ньому можна натиснути і він підкреслюється, як текст основного посилання.
Мал. 2. Вигляд посилання з текстом