Виділення зовнішніх посилань з допомогою CSS

29

Выделение внешних ссылок с помощью CSS

При написанні статей ми так чи інакше ні-ні та використовуємо посилання на зовнішні сайти, це можуть бути посилання на першоджерела, різні веб-додатки, каталоги і т. д. Більшість з нас ніяк не виділяє зовнішні посилання, частіше обмежуючись атрибутом target=”_blank” в засланні, визначальним відкриття цієї самої посилання в новому вікні, ну, або ж стандартні підказки через атрибут title.
Давайте розглянемо найпростіший приклад того, як з допомогою кількох рядків CSS, можна візуально виділити із загального масиву, всі посилання на зовнішні сайти.
Стилізувати посилання, як ви знаєте, можна по різному, виділити кольором, підкресленням і т. д. Ми ж розглянемо варіант використання маленької іконки, яка виглядає як вікно зі стрілкою, найяскравіший приклад можете споглядати в Вікіпедії.
І так, у нас є внутрішні посилання і зовнішні. Якщо всередині сайту, посилання використовується не абсолютний шлях в адресі href=”/”, для того щоб виділити всі зовнішні посилання, в яких за визначенням прописаний абсолютний адресу href=”http://example.com”, достатньо в файл стилів .css додати наступне:

a[href ^= "http"]:after,
a[href ^= "https"]:after {
content: " "
url('external-link-icon.png');
}

a[href ^= “http”]:after,
a[href ^= “https”]:after {
content: “”
url(‘external-link-icon.png’);
}

Якщо ж ви використовуєте абсолютний адресу у внутрішніх посиланнях, то вам слід вказати свій домен і всі посилання мають відмінний від вашого, будуть позначені скромною іконкою, щоб повідомити користувачам, що дана посилання веде на сайт, і буде відкрита в новому вікні або вкладці.

a[href^="http://"]:not([href*="example.com"]):after,
a[href^="https://"]:not([href*="example.com"]):after{
content: " "
url('external-link-icon.png');
}

a[href^=”http://”]:not([href*=”example.com”]):after,
a[href^=”https://”]:not([href*=”example.com”]):after{
content: “”
url(‘external-link-icon.png’);
}

Подивитися живий приклад і поколупатися в коді можете тут:

Ну і на завершення — сама іконка:
Внешние ссылки

PS: Як ви розумієте, стилізувати зовнішні посилання ви можете як завгодно, іконки можуть бути різними, все залежить тільки від вашої невгамовної фантазії.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: