Стилизация исходящих ссылок веб-сайта
Стилизация исходящих ссылок, позволяющая визуально отделить их от внутренних, является распространённой практикой при разработке информационных веб-сайтов.
Необходимость дополнительной стилизации таких ссылок внутри текстового контента страницы, связана прежде всего с повышением удобства использования веб-сайта. Так, видя стилизованную особым образом ссылку, пользователь заранее определяет, что при переходе по ней он будет направлен на внешний ресурс.
Существуют различные способы реализации этой возможности – ручное добавление классов на этапе подготовки контента к публикации, автоматическая обработка контента на стороне веб-сервера или на стороне клиента с добавлением к ссылкам необходимых атрибутов. Однако наиболее простой способ – использование селекторов CSS. Добавление приведённого фрагмента кода в каскадную таблицу стилей веб-сайта, позволяет решить задачу стилизации исходящих ссылок без дополнительных манипуляций с обработкой контента.
a[href*="//"]:not([href*="mywebsite.ru"]) {
/* код, определяющий стиль исходящих ссылок веб-сайта */
}
Вместе с приведённым селектором могут использоваться псевдоэлементы :before
и :after
. Например, для добавления к анкорам исходящих ссылок стрелок, указывающих вправо, может использоваться следующий код:
a[href*="//"]:not([href*="mywebsite.ru"]):after {
content: ' \2192';
}