CSS: внешние ссылки стиля

Ответ 1

Используя некоторый специальный синтаксис CSS, вы можете легко это сделать. Вот один из способов, который должен работать как для протоколов HTTP, так и для HTTPS:

a[href^="http://"]:not([href*="example.com"]):after,
a[href^="https://"]:not([href*="example.com"]):after{
    content: " (EXTERNAL)" 
}

Вы можете просмотреть пример этого, нажав здесь.

Ответ 2

Таким способом отображаются внешние ссылки ALA Wikipedia:

a[href^="http"]:after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}

Пример можно найти здесь: http://jsfiddle.net/ZkbKp/

Ответ 3

Я объединил @superlogical + @Shaz, чтобы сделать что-то для моей темы Foundation WP...

a[href^="http://"]:not([href*="maggew.com"]):after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}

Вы можете использовать этот фрагмент HTML для тестирования на своем сайте:

<a href="http://gebfire.com" target="_blank">External</a>

Это то, что я использовал для пользовательского изображения (например, значка)

a[href^="http://"]:not([href*="magew.com"]):after {
     content: " " url('/wp-content/uploads/2014/03/favicon.png');    
}

Ответ 4

Одно простое правило, не требующее жесткого кодирования:

a[href*="//"] { /* make me do stuff */ }

Работает для всех схем. Имеет дополнительное преимущество определения внутренних опечаток. Для скрытых внутренних ссылок, перенаправляемых извне, просто добавьте относительный URL к префиксу //.

Благодарность принадлежит Марку Баттистелле, который оставил этот фрагмент в CSS-Tricks в 2012 году.

Обновление: Исходя из фактического использования, я лично нашел вышеописанное проблематичным, поскольку он стилизует все абсолютные ссылки, что может привести к неожиданному стилю в некоторых ситуациях (например, в Brave, когда вы загружаете страницу для просмотра в автономном режиме). Я предлагаю использовать вместо этого a[rel*="external"]::after и украсить ваши внешние ссылки.

Ответ 5

Предположим, вы устанавливаете цель для внешних ссылок с помощью <a href='http://' target='_blank'>Justin Bieber Fan Club</a> , Вы можете сделать игру:

CSS:

a[target="_blank"]:after{
     content: " [external]" 
}

Ответ 6

У псевдоэлементов в синтаксисе есть "::" вместо ":".

Также необходимо сопоставить URL-адрес, начинающийся с "http", а не "http://" или "https://".

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

Чтобы добавить аккуратный значок, вы можете поместить SVG в переменную CSS, а затем использовать его в своем правиле CSS.

    --icon-external-link: url('data:image/svg+xml,\
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-24 -24 48 48"> \
            <defs> \
                <mask id="corner"> \
                    <rect fill="white" x="-24" y="-24" width="48" height="48"></rect> \
                    <rect fill="black" x="2" y="-24" width="22" height="26"></rect> \
                </mask> \
            </defs> \
            <g stroke="blue" fill="blue" stroke-width="4"> \
                <rect x="-20" y="-16" width="32" height="32" rx="7" ry="7" stroke-width="3" fill="none" mask="url(%23corner)"/> \
                <g transform="translate(1,0)" stroke-linecap="square"> \
                    <line x1="0" y1="0" x2="17" y2="-17" stroke-width="6"/> \
                    <polygon points="21 -21, 21 -8, 8 -21" stroke-linejoin="round" stroke-width="3"/> \
                 </g> \
             </g> \
        </svg>');

Это выглядит странно, но это аккуратный значок внешней ссылки, который можно редактировать в соответствии с вашей темой, не возвращаясь к настольному издательскому приложению. Поскольку значок является частью таблицы стилей, вам не нужно, чтобы браузер делал для него дополнительную загрузку. Кроме того, потому что это SVG является четким. "Прямоangularьник" - это поле, группа с "линией" и "многоangularьником" - это стрелка. Все числа являются целыми числами, и вы можете изменить их, если хотите.

Тогда в вашем правиле вы можете ссылаться на него так:

a[href^="http"]:not([href*="example.mil"])::after {
    content: '';
    background: no-repeat left .25em center var(--icon-external-link);
    padding-right: 1.5em;
}

Соответствующие ссылки начинаются с http и не содержат вашего доменного имени. И "http://", и "https://" начинаются с "http", поэтому нет необходимости дублировать правило в соответствии с принятым ответом.

Если вы используете в своем контенте ссылки без протокола, начинающиеся с '//', это необходимо учитывать.

Вы также можете быть строгими в том, как открывать внешние ссылки. Например, вы можете всегда открывать внешние ссылки на новой вкладке с целевым пустым подходом. Чтобы сделать это правильно, вам нужно включить target="_blank", а также rel="noopener noreferrer" в ваши ссылки. Поэтому, чтобы определить, где этого нет в вашей разметке, вы можете настроить таргетинг только на ссылки, которые имеют правильные атрибуты rel.

Ответ 7

я использую это:

 a[href^="http"]:after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}

а что если я хочу покрасить всю внешнюю ссылку? красный например