¿Cómo puedo diseñar enlaces externos como Wikipedia?

Question

¿Cómo puedo diseñar enlaces externos como Wikipedia?

Me gustaría distinguir entre enlaces externos e internos usando solo CSS.

Me gustaría añadir un pequeño icono al lado derecho de estos enlaces, sin que cubra otro texto.

El icono que me gustaría usar es el icono usado en Wikipedia.

Por ejemplo, este es un enlace externo:

<a href="http://stackoverflow.com">StackOverflow</a>

Este es un enlace interno:

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

muestra del resultado deseado

¿Cómo puedo hacer esto usando solo CSS?

28

css css3 progressive-enhancement

Author: FakeRainBrigand, 2013-08-11

Source

3 answers

Creo que esto le ayudará a resolver el problema simplemente,

Añadir un icono de enlace externo después de enlaces externos con CSS

Cita del artículo:

Esto hará que todos los enlaces tengan un icono externo vinculado al final,

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

Y el siguiente código evitará el estilo de icono externo en urls específicas:

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

6

Author: eagles,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-24 06:56:43

OK, esto es bastante similar a las otras respuestas, pero es corto y dulce y funciona tanto para http como para https. Por supuesto, tendrá problemas si usa barras dobles en sus URL internas, pero no debería hacerlo de todos modos (ver estos preguntas).

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

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

Desearía haber sabido esto antes de etiquetar todos mis enlaces con class="internal" y class="external".

Así que para añadir una imagen, como ya se ha dicho:

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

5

Author: Keith,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-25 00:10:21

score 32 · Accepted Answer

Demo

Fundamentos

Usando :after podemos inyectar contenido después de cada selector coincidente.

El primer selector coincide con cualquier atributo href que comience con //. Esto es para enlaces que mantienen el mismo protocolo (http o https) que la página actual.

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

Estas son las url tradicionalmente más comunes, como http://google.com y https://encrypted.google.com

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

Entonces podemos pasar una url al contenido atributo para mostrar la imagen después del enlace. El margen se puede personalizar para adaptarse a la

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

Permitir ciertos dominios como locales

Digamos que estamos en example.org y queremos marcar enlaces a blog.example.org como en el mismo dominio para este propósito. Esta es una forma bastante segura de hacerlo, sin embargo, podríamos tener una url como http://example.org/page//blog.example.org /

nota: asegúrese de que esto viene después de lo anterior en sus estilos

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

Para más estricto coincidiendo, podemos tomar nuestros ajustes iniciales y anularlos.

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