Front End Tools </>

Aplicar estilos css a elaces externos

Fecha publicación
Table of Contents

Utilizando los selectores de atributos de css, podemos seleccionar enlaces externos y añadirle un icono.

Vamos a ver algunos ejemplos de selectores de atributos que nos pueden ayudar a aplicar estilos a los enlaces externos.

Utilizando el atributo target

Generalmente, a los enlaces externos añadimos el atributo target="_blank" para que se abra en una nueva pestaña.

a[target='_blank']:after {
  content: url('/static/icons/external-link.svg');
  margin-left: 0.25rem;
}
Github
  • La propiedad content puede ser una string, que representa el path o bien la imagen en base 64.
  • Si utilizamos alguna librería de iconos como FontAwesome, podemos utilizar la propiedad content para indicar el código del icono.
a[target='_blank']:after {
  content: ' \f08e';
  font-family: 'FontAwesome';
}

Utilizando el atributo href

Basandonos en el valor del atributo href podemos decidir si un enlace es interno o externo.

Por ejemplo

  • Si el dominio utilizado no coincide con el dominio del sitio web.
  • Si no es un ancla (No inicia con #)
  • Si no empieza con /
a:not([href*='frontendstools.com']):not([href^='#']):not([href^='/']):after {
  content: url('/static/icons/external-link.svg');
  margin-left: 0.25rem;
}

Icono SVG y Base 64

BASE 64 External icon

data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjUwMDIgMTBIMTIuNTAwMkMxMi4yMjQyIDEwIDEyLjAwMDIgMTAuMjI0IDEyLjAwMDIgMTAuNVYxNEgyLjAwMDAzVjRINi41MDAxQzYuNzc2MzYgNCA3LjAwMDExIDMuNzc2MjUgNy4wMDAxMSAzLjVWMi41QzcuMDAwMTEgMi4yMjM3NSA2Ljc3NjM2IDIgNi41MDAxIDJIMS41MDAwMkMwLjY3MTUxMSAyIDAgMi42NzE1IDAgMy41VjE0LjVDMCAxNS4zMjgyIDAuNjcxNTExIDE2IDEuNTAwMDIgMTZIMTIuNTAwMkMxMy4zMjg1IDE2IDE0LjAwMDIgMTUuMzI4MiAxNC4wMDAyIDE0LjVWMTAuNUMxNC4wMDAyIDEwLjIyNCAxMy43NzYyIDEwIDEzLjUwMDIgMTBaTTE1LjI1MDIgMEgxMS4yNTAyQzEwLjU4MjQgMCAxMC4yNDg0IDAuODA5NSAxMC43MTg5IDEuMjgxMjVMMTEuODM1NCAyLjM5Nzc1TDQuMjE4ODIgMTAuMDExNUM0LjA4MjMxIDEwLjE0NzIgMy45OTgzMSAxMC4zMzUyIDMuOTk4MzEgMTAuNTQyN0MzLjk5ODMxIDEwLjc1MDIgNC4wODI4MSAxMC45MzgyIDQuMjE4ODIgMTEuMDc0TDQuOTI3MDggMTEuNzgxMkM1LjA2MjgzIDExLjkxNzggNS4yNTA1OCAxMi4wMDE3IDUuNDU4MzMgMTIuMDAxN0M1LjY2NjA5IDEyLjAwMTcgNS44NTM4NCAxMS45MTc1IDUuOTg5NTkgMTEuNzgxMkwxMy42MDI1IDQuMTY2MjVMMTQuNzE4NyA1LjI4MTI1QzE1LjE4NzUgNS43NSAxNiA1LjQyMiAxNiA0Ljc1VjAuNzVDMTYgMC4zMzYgMTUuNjY0IDAgMTUuMjUgMEgxNS4yNTAyWiIgZmlsbD0iIzQwNDA0MCIvPgo8L3N2Zz4K

SVG External icon

<svg width="16" height="16" viewBox="0 0 16 16" fill="" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5002 10H12.5002C12.2242 10 12.0002 10.224 12.0002 10.5V14H2.00003V4H6.5001C6.77636 4 7.00011 3.77625 7.00011 3.5V2.5C7.00011 2.22375 6.77636 2 6.5001 2H1.50002C0.671511 2 0 2.6715 0 3.5V14.5C0 15.3282 0.671511 16 1.50002 16H12.5002C13.3285 16 14.0002 15.3282 14.0002 14.5V10.5C14.0002 10.224 13.7762 10 13.5002 10ZM15.2502 0H11.2502C10.5824 0 10.2484 0.8095 10.7189 1.28125L11.8354 2.39775L4.21882 10.0115C4.08231 10.1472 3.99831 10.3352 3.99831 10.5427C3.99831 10.7502 4.08281 10.9382 4.21882 11.074L4.92708 11.7812C5.06283 11.9178 5.25058 12.0017 5.45833 12.0017C5.66609 12.0017 5.85384 11.9175 5.98959 11.7812L13.6025 4.16625L14.7187 5.28125C15.1875 5.75 16 5.422 16 4.75V0.75C16 0.336 15.664 0 15.25 0H15.2502Z" fill="#848484" />
</svg>
Discusión en Twitter • ¿Algún error? Edita el artículo en github