Как я могу использовать внешние ссылки, например, Википедию?

Я хотел бы различать внешние и внутренние ссылки, используя только CSS.

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

Значок, который я хотел бы использовать, - это значок используемый в Википедии.

Например, это внешняя ссылка:

<a href="#" onclick="location.href='http://stackoverflow.com'; return false;">StackOverflow</a>

Это внутренняя ссылка:

<a href="/index.html">home page</a>

sample of desired result

Как это сделать, используя только CSS?

Ответы

Ответ 1

демо

Основы

Используя :after, мы можем вводить содержимое после каждого выбранного селектора.

Первый селектор соответствует любому атрибуту href, начинающемуся с //. Это для ссылок, поддерживающих один и тот же протокол (http или https) в качестве текущей страницы.

a[href^="//"]:after,

Это традиционно более распространенные URL-адреса, например http://google.com и https://encrypted.google.com

a[href^="http://"]:after, 
a[href^="https://"]:after {

Затем мы можем передать URL-адрес атрибуту контента, чтобы отобразить изображение после ссылки. Поля могут быть настроены так, чтобы соответствовать

  content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
  margin: 0 0 0 5px;
}

Разрешить определенные домены как локальные

Скажем, мы на example.org, и мы хотим пометить ссылки на blog.example.org как на тот же домен для этой цели. Это довольно безопасный способ сделать это, однако у нас может быть URL-адрес, например http://example.org/page//blog.example.org/

Примечание: убедитесь, что это произошло после вышесказанного в ваших стилях

a[href*="//blog.example.org/"]:after {
  content: '';
  margin: 0;
}

Для более строгого совпадения мы можем взять наши начальные настройки и переопределить их.

a[href^="//blog.example.org/"]:after, 
a[href^="http://blog.example.org/"]:after, 
a[href^="https://blog.example.org/"]:after {
  content: '';
  margin: 0;
}

Ответ 2

Я думаю, что это поможет вам решить проблему просто,

Добавить ссылку на внешнюю ссылку после внешних ссылок с помощью CSS

Цитата из статьи:

Это сделает все ссылки в стиле с внешним связанным значком в конце,

a[href^="http://"] {
    background: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png)     center right no-repeat;
    padding-right: 13px;
}

И следующий код предотвратит внешний стиль значка на определенных URL-адресах:

a[href^="http://www.stackoverflow.com"]  {
    background: none;
    padding-right: 0;
}

Ответ 3

Хорошо, это очень похоже на другие ответы, но оно короткое и сладкое и работает как для http, так и для https. Конечно, у вас будут проблемы, если вы используете двойные слэши во внутренних URL-адресах, но вы не должны этого делать (см. questions).

a:not([href*="//"]) {
    /* CSS for internal links */
}

a[href*="//"] {
    /*CSS for external links */
}

Хотел бы я знать об этом, прежде чем пометить все мои ссылки с помощью class="internal" и class="external".

Итак, чтобы добавить изображение, как уже было сказано:

a[href*="//"]::after {
    content: url(/* image URL here */);
}