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

При написании статей мы так или иначе нет-нет да используем ссылки на внешние сайты, это могут быть ссылки на первоисточники, различные веб-приложения, каталоги и т.д. Большинство из нас никак не выделяет внешние ссылки, чаще ограничиваясь атрибутом target="_blank" в ссылке, определяющим открытие этой самой ссылки в новом окне, ну, или же стандартные подсказки через атрибут title.

out link

Давайте рассмотрим простейший пример того, как с помощью нескольких строк CSS, можно визуально выделить из общего массива, все ссылки на внешние сайты.

Стилизовать ссылки, как вы знаете, можно по разному, выделить цветом, подчёркиванием и т.д. Мы же рассмотрим вариант использования маленькой иконки, которая выглядит как окно со стрелкой, самый яркий пример можете лицезреть в Википедии.

И так, у нас есть внутренние ссылки и внешние. Если внутри сайта, в ссылках используется не абсолютный путь в адресе href="/", для того чтобы выделить все внешние ссылки, в которых по определению прописан абсолютный адрес href="http://example.com", достаточно в файл стилей .css добавить следующее:

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');
}

В итоге ссылки будет выглядеть так:

Ну и в завершение — сама иконка:

 
Автор: Андрей, Источник
 

Комментарии  

0 #1 Петр Филатов 12.02.2016 16:37
Спасибо давно искал рещение
Цитировать

Добавить комментарий


Защитный код
Обновить