Diferenciar los enlaces según el atributo target

Los selectores condicionales permiten detectar casi cualquier cosa y de ese modo, mostrar las etiquetas con ciertos efectos gráficos diferenciados en función de alguna regla sin tener que editar las etiquetas HTML. Si a eso le sumamos la posibilidad de agregar contenido mediante CSS, las opciones disponibles se multiplican.

Para agregar contenido usamos la propiedad content que sólo requiere de un valor:

content: "algo";

donde ese algo> puede ser un texto:

content: "un texto cualquiera";

una imagen:

content: url(UNA_IMAGEN);

el contenido de alguno de los atributos de la etiqueta (href, title, rel):

content: attr(rel);

o una combinación de ellos, separados por un espacio:

content: url(UNA_IMAGEN) " un texto";

De este modo, sería sencillo detectar los enlaces que se abren en una ventana separada (target="_blank") y diferenciarlos gráficamente de aquellos que no lo hacen. Para hacer algo así, nos valemos de los pseudo-elementos :after y :before que son los que nos facilitarán la tarea de agregar ese contenido adelante o atrás de nuestros enlaces.

Vamos a un ejemplo. Tenemos dos enlaces de este tipo:

<a href="#">enlace normal</a>
<a href="#" target="_blank">enlace a nueva página</a>

Crearemos una regla que los diferencie y agregue una imagen al que tiene un atributo target _blank y la pondremos a la izquierda, separada unos pixeles del texto:

a[target="_blank"]:before {
    content: url(UNA_IMAGEN);
    margin-right: 3px;
}

enlace normal
enlace a nueva página

Lo mismo podemos hacer usando textos con caracteres "raros"; para eso, debemos usar su valor hexadecimal antecediéndolo con una barra inclinada \ (ver tabla de caracteres):

content: "\3E";
content: "\203A";

Otro ejemplo:

enlace normal
enlace a nueva página

Acá usamos muchas propiedades extras, establecemos fuentes, fondos, colores y cualquier otro detalle que se nos ocurra para que ese carácter agregado se vea "distinto" y le adosamos efectos hover:

a.[target="_blank"]:before {
  background-color: #FFF;
  border-radius: 6px;
  color: #000;
  content: "\203A";
  display: inline-block;
  font-family: Verdana;
  font-size: 18px;
  font-weight: bold;
  line-height: 12px;
  margin: 0 5px 0 0;
  padding: 0 2px 3px;
  text-align: center;
  vertical-align: baseline;
}
a.ejemplo2:hover {
  color: #ABC;
}
a.ejemplo2:hover[target="_blank"]:before {
  background-color: #68A;
  color: #FFF;
}

¿Y qué pasa si queremos que se muestre a la derecha en lugar de a la izquierda? En lugar de :before, usamos :after:

a.[target="_blank"]:after {
    content: url(UNA_IMAGEN);
    margin-left: 3px;
}

enlace normal
enlace a nueva página