CSS: стиль внешних ссылок

Question

Я хочу стилизовать все внешние ссылки на моем сайте (Wordpress).Я пытаюсь с:

.post p a[href^="http://"]:after

Но Wordpress поместил весь URL в ссылки ... Итак, как я могу стилизовать все ссылки, которые не начинаются с http://www.mywebsite.com?

Спасибо.

Answer 1

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

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

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

Answer 2

Так показываются внешние ссылки ALA Wikipedia:

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

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

Answer 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');    
}

Answer 4

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

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

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

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

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

Answer 5

Псевдоэлементы имеют в синтаксисе '::' вместо ':'.

Существует также необходимость сопоставления 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 является четким. «Прямоугольник» - это поле, группа с «линией» и «многоугольником» - это стрелка. Все числа являются целыми числами, и вы можете изменить их, если хотите.

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

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.

Answer 6

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

CSS:

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