Добавим изображения исходящим ссылкам с помощью CSS

Количество просмотров: 385

Многим владельцам веб ресурсов хочется как-то выделять ссылки на сторонние ресурсы, чтобы посетитель понимал, что кликнув по данной ссылке он перейдет на другой сайт.

Для этого в CSS существует замечательный селектор по атрибуту href. С помощью него мы добавим для исходящих ссылок изображение. Рассмотрим следующий пример.

У нас есть текст и где это <a href="/">слово</a> ведет на главную страницу нашего сайта, а <a href="http://google.ru">это</a> на поисковик гугл.

Нам нужно выделить ссылку на внешний ресурс. Для этого будем использовать данную картинку

Теперь напишем соответствующее CSS правило.


a[href^="http://"]:not([href*="goodweb.me"]):after,
a[href^="https://"]:not([href*="goodweb.me"]):after{
    content: ''
url('/link-out.png');
padding-left:2px;
}

Разберем, что делает данное правило.

Первая строка a[href^="http://"]:not([href*="goodweb.me"]):after выбирает все элементы <а> которые содержат в атрибуте href - http и при этом не содержат адрес нашего сайта, т.е. goodweb.me, всем выбранным элементам добавляется псевдо-элемент after с картинкой. Вторая строчка, добавленная через запятую делает тоже самое, только для ссылок на https.

Посмотрим на пример в действии.


comments powered by HyperComments

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх