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:

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

En línea...

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

Prácticas...

aulav

Visitas...

0.png6.png3.png0.png2.png
Hoy ........3
Ayer .......15
Mes ........230

Jueves, 24 Agosto 2017