dimayakovlev.ru


Стилизация исходящих ссылок веб-сайта

Стилизация исходящих ссылок, позволяющая визуально отделить их от внутренних, является распространённой практикой при разработке информационных веб-сайтов.

Необходимость дополнительной стилизации таких ссылок внутри текстового контента страницы, связана прежде всего с повышением удобства использования веб-сайта. Так, видя стилизованную особым образом ссылку, пользователь заранее определяет, что при переходе по ней он будет направлен на внешний ресурс.

Существуют различные способы реализации этой возможности – ручное добавление классов на этапе подготовки контента к публикации, автоматическая обработка контента на стороне веб-сервера или на стороне клиента с добавлением к ссылкам необходимых атрибутов. Однако наиболее простой способ – использование селекторов CSS. Добавление приведённого фрагмента кода в каскадную таблицу стилей веб-сайта, позволяет решить задачу стилизации исходящих ссылок без дополнительных манипуляций с обработкой контента.

a[href*="//"]:not([href*="mywebsite.ru"]) {
  /* код, определяющий стиль исходящих ссылок веб-сайта */
}

Вместе с приведённым селектором могут использоваться псевдоэлементы :before и :after. Например, для добавления к анкорам исходящих ссылок стрелок, указывающих вправо, может использоваться следующий код:

a[href*="//"]:not([href*="mywebsite.ru"]):after {
  content: ' \2192';
}