vagacode

Como no pretendo ser otra cosa que un simple usuario, puedo atreverme a decir sin ponerme colorado, que muchas de las nuevas propiedades del CSS3 me parecen totalmente inútiles y redundantes pero allí están, sumándose a las que ya había y obligándonos a decidir si seguimos las nuevas ondas o nos quedamos con eso que ya conocemos y hemos probado que funciona.

Si embargo, de todas las novedades (que ya no son tan novedosas), los pseudo-elementos ::after y ::before me parecen hallazgos que tienen infinitas posibilidades porque resultan ser sencillos de manejar y muy útiles.

before es lo que está antes ...
after es lo que está después ...
¿antes y después de qué?

En CSS hablamos de lo que está antes y después de una etiqueta cualquiera pero no de las etiquetas o contenidos adyacentes sino de la etiqueta en si misma. Podríamos imaginar que la dividimos en tres partes, el pseudo-elemento ::before es eso que está en el extremo izquierdo (antes) y ::after es lo que está en el extremo derecho (después) ¿No se ve? No, normalmente no se ve nada porque por defecto, allí no hay nada. Estos pseudo-elementos nos permiten agregar ese contenido extra.

Veamos eso en la práctica; supongamos una etiqueta de título cualquiera como h3 :

h3::after, h3::before {
	background-color: red;
	color: white;
}
h3:after { content: " despues "; }
h3:before { content: " antes "; }

La palabra antes aparecerá a la izquierda y la palabra después a la derecha ya que esas son las posiciones por defecto.

¿Qué cosas podemos agregar? Propiedades en general y una de ellas llamada content es la que nos permite adosar contenidos que pueden ser tanto textos como imágenes.

Si quisiéramos controlar la posición de ese contenido extra, lo mejor sería establecer una posición relativa en la etiqueta principal y darle a esos pseudo-elementos una posición absoluta; de este modo podríamos agregarle imágenes de fondo:

h3 {
	position: relative;
}
h3:after, h3:before {
	content: url("URL_imagen");
	position:absolute;
}
h3::after {
	right: 0;
	top: -50%;
}
h3::before {
	left: 0;
	top: -50%;
	transform: rotateY(180deg);
}

Otro ejemplo concreto, supongamos que tenemos artículos donde agregamos enlaces a distintos sitios donde ampliamos cierta información; en lugar de escribir un enlace sencillo podríamos definir alguna clase que los mostrase de un modo distinto:

a::before {
	content: url("URL_IMAGEN");
	margin-left: 1em;
	vertical-align: middle;
}
a::after {
	color: #5891be;
	content: " [mas informacion] ";
	font-size: 24px;
}

Alguien podría preguntar ¿qué utilidad pude tener esto? ¿no sería más fácil agregar una etiqueta img? Depende ... si es algo que debemos escribir decenas de veces es mucho más sencillo dejar que el CSS lo haga de modo automático.

La propiedad content también permite establecer otro tipo de datos estandarizados. Uno de ellos son la comillas y en este caso hay dos valores posibles que adosan una comilla abierta y otra cerrada en un párrafo:

p::after, p::before {
	color: red;
	font-size: 2em;
	vertical-align: middle;
}
p::before{ content:open-quote; }
p::after{ content:close-quote; }

La propiedad content admite otros valores; por ejemplo counter() se utiliza para crear un contador combinado con la propiedad counter-increment que en su forma más simple, tiene como valor un nombre que hayamos elegido.

Veamos un ejemplo; tenemos una serie de párrafos y usaremos ::before para anteponerles un número delante de cada uno, un número que será el número de orden de ese párrafo:

p {
	counter-increment: indice;
	text-indent: 5em;
}
p::before {
	background-color: gray;
	border-radius: 50%;
	color: white;
	content: counter(indice, decimal);
	display: inline-block;
	font-weight: bold;
	margin-right: 0.5em;
	padding-right: 0.5em;
	text-align: end;
	vertical-align: text-bottom;
	width: 1em;
}

Eventualmente, usaremos la propiedad counter-reset para poner el contador a cero.

Ambos pseudo-elementos pueden combinarse con pseudo-clases y de ese modo, agregar contenido con efectos de tipo rollover:

<style>
.rollover {
	cursor: pointer;
	position: relative;
	text-align: center;
}
.rollover::before {
	background-color: rgba(0, 0,0, 0.5);
	color: white;
	content: "esta es una ventana";
	font-size: 150%;
	line-height: 1.5em;
	margin-left: -150px;
	opacity: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	transition: all 1s ease 0s;
	width: 300px;
}
.rollover:hover::before {
	opacity: 1;
}
</style>

<p class="rollover"><img src="url_imagen"></p>

Hasta acá hemos usado ::after y ::before con la propiedad content conteniendo un texto o una imagen pero, en realidad no es necesario que tenga contenido alguno, podemos colocar como valor una cadena de texto vacío.

Otra función asociada que podemos utilizar en content es attr() para utilizar un contenido variable que es el valor del atributo identificado como parámetro. Esta es una de las formas en que podemos crear tooltips:

<style>
.tooltip {
	color: red;
	cursor: pointer;
	display: inline;
	font-weight: bold;
	position: relative;
}
.tooltip:hover::after {
	background-color: gray;
	border-radius: 4px;
	top: -3.5em;
	color: white;
	content: attr(title);
	font-size: 80%;
	left: -5em;
	padding: .1em .5em;
	position: absolute;
	text-align: center;
	width: 15em;
}
</style>

<p>texto texto <span title="ejemplo de tooltip" class="tooltip">referencia</span> texto texto texto</p>

El texto que se mostrará es el que se encuentra en el atributo title de la etiqueta; si se quisiera utilizar otro atributo, bastaría cambiar la propiedad content.

A veces, en content es necesario usar caracteres raros o especiales tales como letras acentuadas y estos no se ven bien o aparece un signo de interrogación. Por lo general, esto se resuelve si la codificación de caracteres es correcta pero lo lógico no siempre funciona y, en esos casos, debemos escribirlos en un formato especial, las llamadas cadenas de escape que no son otra cosa que una barra invertida seguida por un número que, de manera genérica es el código Unicode en formato hexadecimal (cuatro dígitos):

Por ejemplo:

content: "\00e1 \00e9 \00ed \00f3 \00fa"; \* escribirá á é í ó ú *\