JMiur [E]

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;
}

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:


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;
}

11 comentarios:

pyrat  

JMiur eres un crack! ;)

Responder
Asesino Cereal  

Si le quito el :before, puedo usarlo para que sólo los enlaces con target="_blank" tengan el color que tienen ahorita?
Es decir, tengo una regla CSS para cambiar de color a todos los enlaces con la clase "ENLACE", ¿bastaría si a esa regla le agrego un [target="_blank"]?

Responder
Adrián J. Messina  

Excelente la explicación, una clase magistral.
Mis millones de "target="_blank" se van a poner a bailar... =)

Responder
JMiur  

Asesino Cereal:
Sí; por ejemplo, poniendo:
a { color:blue; }
a[target="_blank"] { color:red; }
todos los enlaces serian azules pero los que tengan el atributo target, serán rojos.

Responder
Sergio Molina  

Oye jmiur formulé mal mi pregunta:


La pregunta es como hago para que diferenciar estos enlaces solo en las entradas no en todo el blog, y en que parte del estilo va este codigo!

Responder
JMiur  

Como toda regla de estilo, el Blogger va entre <b:skin> </b:skin> o entre etiquetas <style> </style>

En cuanto a que sólo afecte a las entradas en si mismas, dependerá de la plantilla pero, así, en general, en un blog de Blogger bastaría indicar la clase antes que la etiqueta::

.post-body a.[target="_blank"] {}
.post-body a[target="_blank"]:before {}
.post-body a[target="_blank"]:after {}

Responder
Sergio Molina  

No me doy lo intente y nada no pude arreglarlo

Responder
JMiur  

Tendría que ver tu ejemplo y que has colocado.

Responder
jose antonio  

He añadido
.post-body a[target="_blank"]:after { content: url(https://dl.dropbox.com/u/17409693/images/images_body/out.gif);margin-left: 3px;} a mi plantilla pero me sigue apareciendo junto a las imágenes en las paginas externas. ¿como lo quito?. Gracias.

Responder
jose antonio  

Me respondo.
Añadido en el style type='text/css' de la página:

.post-body a[target="_blank"]:after {content: none; margin-left: 0px;}

Con esto, a mi, no me aparece el signo de externización junto a las imagenes que son enlaces. Un Saludo

JMiur  

Tendría que ver tu ejemplo para saber qué has hecho.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR