Pseudoelementos CSS

Publicado en Programación

Los pseudoelementos :before y :after se utilizan junto con la propiedad content para añadir contenidos antes o después del contenido original de un elemento. Estos dos pseudoelementos hacen algo que ningún otro elemento de CSS es capaz de hacer: insertar contenido justo antes, o justo después, de un elemento.

Pseudoelemento	Descripción
:before	Aplica estilos antes del elemento indicado
:after	Aplica estilos después del elemento indicado

Imaginemos que queremos poner unas comillas especiales cuando citamos una frase de un determinado autor. Creando una clase, que podemos llamar .cita, logramos esto fácilmente:

Ejemplo


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="cita">Esto es una cita de un autor</span>
Laudantium quasi, eum natus, nulla recusandae maiores optio reiciendis fugit debitis
maxime soluta sit possimus tenetur. Voluptates labore tempora magni itaque laborum.</p>


.cita {
  font: italic 1.1em serif;
}
.cita:before {
  content: " « ";
}
.cita:after {
  content: " » ";
}

Lo mismo que introducimos unas comillas podemos introducir cualquier tipo de palabra, frase, icono tipográfico, imagen, etc...

La propiedad content admite parámetros de diverso tipo, incluso concatenando información mediante espacios.

Valor	Descripción	Ejemplo
string	Añade la cadena indicada	content: "Un texto";
attr(atributo)	Añade el valor del atributo indicado	content: attr(href);
url(URL)	Añade la imagen indicada en la URL	content: url(http://dominio.com/img/icon.png);

Etiquetas: Teoría, CSS3

Imprimir