JMiur [E]

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

En CSS es lo que está antes y después de una etiqueta cualquiera pero no se trata de las etiquetas o contenidos adyacentes sino que podríamos decir que algo así como dividir una etiqueta en tres partes, el pseudo-elemento :before es eso que está en el extremo izquierdo de una etiqueta y :after es lo que está en el extremo derecho de esa etiqueta y por defecto, allí no hay nada.

Veamos un ejemplo cualquiera, voy a usar una etiqueta de encabezado H3 con algún estilo:

un título cualquiera


<style>
.titulodemo {
  /* voy a poner una imagen de fondo porque en IE8 los filtros pueden complicarnos la vida */
  background: transparent url(URL_gradiente) repeat-x 0 0;
  /* en el resto de los navegadores, el fondo es una gradiente */
  background-image: -moz-linear-gradient(85deg, #440, #FD0);
  background-image: -webkit-linear-gradient(85deg, #440, #FD0);
  background-image: -o-linear-gradient(85deg, #440, #FD0);
  background-image: -ms-linear-gradient(85deg, #440, #FD0);
  border-radius:0 20px 0 20px;
  color: #FFF;
  display: inline-block;
  font-family: Helvetica;
  font-size: 55px;
  height: 90px;
  letter-spacing: -3px;
  line-height: 90px;
  margin: 0 60px;
  padding: 0 25px;
  position: relative;
  text-align: center;
  text-shadow: 3px 3px 3px #000;
}
</style>

<h3 class="titulodemo">
un título cualquiera</h3>

¿Dónde están el :after y el :before allí? En ninguna parte a menos que les agreguemos propiedades y lo mejor es definir la etiqueta principal con position: relative y esos pseudo-elementos con position: absolute de ese modo, podremos controlar su ubicación con exactitud.

Le agrego un texto:
.titulodemo:after, .titulodemo:before {
  position: absolute;
  top: 0;
  /* agrego cualquier propiedad para controlar la fuente y el color del texto */
}
.titulodemo:after {
  content: "after";
  right: 0;
}
.titulodemo:before {
  content: "before";
  left: 0;
}

un título cualquiera


La palabra before aparecerá a la izquierda y la palabra after a la derecha y que esas son las posiciones por defecto. Algo similar puedo hacer con otra propiedad como outline, sin agregar contenido alguno, simplemente, creando un borde al que debo dimensionar ya que no habrá contenido:
.titulodemo:after, .titulodemo:before {
  content: "";
  height: 100%;
  outline: 1px solid red;
  position: absolute;
  top: 0;
  width: 50px;
}
.titulodemo:after { right: 0; }
.titulodemo:before { left: 0; }

un título cualquiera


Como puedo definir casi cualquier contenido, nada impide que use imágenes que se deben colocar en la propiedad content de este modo:
content: url(LA_IMAGEN);
Así que este es un método efectivo para que una etiqueta pueda contener varias imágenes de fondo incluso en navegadores como IE8.
.titulodemo:after, .titulodemo:before {
  position: absolute;
  top: 0;
}
.titulodemo:after {
  content: url(LA_IMAGEN_DE_LA_IZQUIERDA);
  right: 0;
}
.titulodemo:before {
  content: url(LA_IMAGEN_DE_LA_DERECHA);
  left: 0
}

un título cualquiera


Y ahora, como los pseudo-elementos los hemos posicionado de manera absoluta, basta definir left, top, right o bottom para ubicarlos en cualquier parte:
.titulodemo:after, .titulodemo:before {
  position: absolute;
}
.titulodemo:after {
  content: url(LA_IMAGEN_DE_LA_IZQUIERDA);
  right: -75px;
  top: 25px;
}
.titulodemo:before {
  content: url(LA_IMAGEN_DE_LA_DERECHA);
  left: -50px;
  top: -20px;
}

un título cualquiera

9 comentarios:

Llusan  

genial, de mucha ayuda esos after y before :D

Responder
Marian  

Me encanta, creo que lo voy a hacer en mi blog...

Responder
Adrián J. Messina  

Muy bueno, excelente idea :D

Responder
CristJian  

Magnificent!! :D
aunque viéndolo en el IE no salen los bordes redondeados... mugroso IE, debería ser eliminado de la faz de la tierra! jaja :X

Responder
Raul Santos  

Si pongo position: absolute y top: 0 me sale arriba del todo de la página ¿no debería salir arriba del todo del elemento? ¿tendrá algo que ver con que le estoy aplicando el CSS a blockquote? Lo que intento hacer es poner unas comillas abiertas al principio y unas cerradas al final.

Responder
JMiur  

Seguramente te falta colocar la propiedad position: relative al contenedor.

Responder
Raul Santos  

Tienes razón JMiur, se me olvidó colocar el position: relative, gracias.

Responder
Manfenix  

Un pedido JMiur.
Me prestas el degradado? :)

Responder
JMiur  

Use, nomás :-)

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