css - quimica - enlaces internos y externos en html

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

Question

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

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

El icono que me gustaría usar es el que se usa 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> 

¿Cómo puedo hacer esto usando solo CSS?

Answer 1

demo

Lo esencial

Utilizando :after podemos inyectar contenido después de cada selector emparejado.

El primer selector coincide con cualquier atributo href 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 {

Luego podemos pasar una url al atributo de contenido 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 una coincidencia más estricta, podemos tomar nuestra configuración inicial y anularla.

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

Answer 2

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

Agregue un ícono de enlace externo después de los enlaces externos con CSS

Cita del artículo:

Esto hará que todos los enlaces con estilo con 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 direcciones URL específicas:

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

Answer 3

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

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

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

Ojalá hubiera sabido sobre esto antes de etiquetar todos mis enlaces con class="internal" y class="external" .

Así que para agregar una imagen, como ya se ha dicho:

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