Стилизация внешних ссылок
Стилизация внешних ссылок является обычной практикой в большинстве информационных сайтов. Пользователю же приятно видеть, что по щелчку на ссылке его перебросит на другой ресурс. Многие сайты внешние ссылки проверяют на стороне сервера, добавляя «внешний» класс к внешним ссылкам при значении атрибута rel="external" (или, как вариант, rel="nofollow"). Я в свое время этот момент не пропустил и внешние ссылки имеют все необходимые классы и атрибуты 😉
Но, как всегда в таких случаях, есть простое и гениальное решение (решение тут, много букв на английском).
В файл стилей прописываем что-то типа этого (используем стиль википедии):
|
1 2 3 4 5 6 7 8 |
/* Прописываем стиль внешних ссылок, используя :before или :after */ a[href^="http://"]:not([href*="mysite.com"]):after, a[href^="https://"]:not([href*="mysite.com"]):after, a[href^="//"]:not([href*="mysite.com"]):after { font-family: "FontAwesome"; font-size: 70%; content: " \f08e"; } |
И добавляем простой Java-скриптик
|
1 2 |
// Определение внешних ссылок $("a").each(function(index, value) {$(this).html($(this).prop("href"));}); |
Все, теперь внешние ссылки отличаются от внутренних 🙂
Пока крапал данную заметку наткнулся на еще одну очень интересную статью по кастомизации внешних ссылок.