Стиль для внешних ссылок

Ссылки, ведущие на другие сайты, со страниц вашего сайта (внешние ссылки) можно стилизовать несколькими способами. Например, добавляя к таким ссылкам отдельный CSS-класс.

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

/* <a href="//google.com">External link 1</a> */
/* <a href="https://google.com">External link 2</a> */
/* <a href="http://some-site.example">External link 3</a> */

a[href*="//"]:not([href*="your-site-address.name"]) {
    /* any styles you want */
}

Такой селектор выберет все ссылки, в атрибуте href которых есть двойной слеш (//), за исключением страниц вашего сайта. Если же для внутренней навигации вы используете внутренние ссылки без указания протокола, то можно изменить селектор вот так:

a[href^="http"], a[href^="//"] {
    /* any styles you want */
}

See the Pen mdrGxMx by Sergey Kirichenko (@oknechirik) on CodePen.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.