Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017·  

Pseudoelementos CSS

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:

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

En línea...

Hay 156 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

1.png6.png8.png6.png1.png
Hoy ........7
Ayer .......25
Mes ........258

Sábado, 19 Enero 2019