JMiur [E]

:before y :after son llamados pseudo-elementos ¿Qué hacen? Permiten agregar "cosas" a una etiqueta, cosas que pueden ser propiedades CSS o contenido de alguna clase. Podría decirse que es como si a una etiqueta se le adosaran otras dos, una antes (before) y otra después (after).

No tienen demasiadas restricciones y se pueden aplicar a cualquier etiqueta pero a veces es complicado usarlas y son una de esas cosas ideales para experimentar.

Funcionan en cualquier navegador relativamente moderno, incluyendo Internet Explorer 8, Firefox, Chrome, Opera, Safari y la sintaxis básica es:
elemento:before {}
elemento:after {}
por ejemplo::
p:before { ... todas las etiquetas P ... }
.miclase:after { ... todas las etiquetas de una clase ... }
En los navegadores que integran correctamente las reglas del CSS3, suelen usarse dos puntos en lugar de uno pero IE8 no soporta este tipo de sintaxis así que mejor no usarla:
p::before { ... todas las etiquetas P ... }
.miclase::after { ... todas las etiquetas de una clase ... }
Podemos usar cualquier propiedad y hay una especial que es la que nos permite agregar contenido. Básicamente, ese contenido puede ser tanto un texto como la dirección URL de una imagen:
elemento:before { content: "un texto cualquiera"; }
elemento:after { content: url(URL_imagen); }
Un primer ejemplo:
<style>
a.demoAB1:before {
  content: url(URL_UNA_IMAGEN);
  padding-right:3px;
  vertical-align: middle;
  }
  a.demoAB1:after {
    color: #FF0;
    content: " [más información]";
    font-size: 12px;
    font-family: monospace;
    font-weight:normal;
  }
</style>

<div style="text-align: center;">
Etiam venenatis ultrices hendrerit. <a href="#" class="demoAB1">Nunc lectus enim</a>, faucibus sit amet laoreet et, pulvinar sit amet sem.</div>

Etiam venenatis ultrices hendrerit. Nunc lectus enim, faucibus sit amet laoreet et, pulvinar sit amet sem.

Hay otros contenidos posibles como counter(), open-quote, close-quote, etc y además, acepta contenidos múltiples, textos e imágenes simultáneamente: mostrar/ocultar
<style>
  p.demo {
    counter-increment: indice;
  }
  p.demo:before {
    content: counter(indice, decimal);
    padding-right: 5px;
    color: #FF0;
    font-size: 19px;
    vertical-align: middle;
  }
</style>

<p class="demo"> Nam varius fermentum porta orci aliquam.</p>
<p class="demo">Donec condimentum ultrices elit posuere.</p>
<p class="demo">Suspendisse nibh lectus, vulputate amet.</p>

Nam varius fermentum porta orci aliquam.

Donec condimentum ultrices elit posuere.

Suspendisse nibh lectus, vulputate amet.


<style>
  p.demo:before{ content: open-quote; }
  p.demo:after{ content: close-quote; }
</style>

<p class="demo"> Nam varius fermentum porta orci aliquam.</p>

Nam varius fermentum porta orci aliquam.


<style>
  a.demo:before {
    content: url("http://www.mozilla.org/favicon.ico") " MOZILLA";
    background-color: #FFF;
    color: #000 !important;
    padding: 5px 10px 3px;
</style>

<p>Nam varius fermentum porta orci aliquam. <a class="demo" href="URL"></a></p>

Nam varius fermentum porta orci aliquam.


Y de acá en más sólo resta delirar un poco:


Phasellus neque massa, mollis eu venenatis vitae, sodales vel quam. Aenean vitae nulla ipsum, ac malesuada felis. Morbi semper laoreet adipiscing. Nam adipiscing lacinia eros at mattis. Nullam at dui id eros mattis imperdiet sed quis enim. Praesent in felis risus, eget dignissim lectus.

<style>
  div.demoAB2 {
    background-color: #000;
    border: 1px solid #456;
    color: #FFF;
    font-family: Verdana;
    margin: 0 auto;
    padding: 20px 10px;
    position: relative;
    text-align: center;
    width: 400px;
  }
  div.demoAB2:before {
    background-color: #000;
    border: 2px solid #456;
    border-radius: 8px;
    content: url(URL_IMAGEN);
    padding: 5px 10px 2px;
    position: absolute;
    right: 20px;
    top: -15px;
  }
  div.demoAB2:after {
    bottom: 35px;
    content: "este es el :after";
    font-family: Helvetica;
    font-size: 20px;
    position: absolute;
    right: -65px;
    width: 55px;
  }
</style>

<div class="demoAB2">
Phasellus neque massa, mollis eu venenatis vitae, sodales vel quam. Aenean vitae nulla ipsum, ac malesuada felis. Morbi semper laoreet adipiscing. Nam adipiscing lacinia eros at mattis. Nullam at dui id eros mattis imperdiet sed quis enim. Praesent in felis risus, eget dignissim lectus.</div>



<style>
  div.demoAB3 {
    position: relative;
    text-align: center;
  }
  div.demoAB3:before {
    background-color: rgba(255,255,255,.2);
    box-shadow: 0 0 10px #A0A9B1 inset;
    border-radius: 10px;
    content: "esta es una imagen";
    font-family: Tahoma;
    font-size: 32px;
    height: 48px;
    line-height: 48px;
    padding: 0 10px;
    position: absolute;
    right: 50px;
    top: 20px;
    /* para Chrome */
    display:inline-block;
    /* para IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FFFFFF,endColorstr=#20FFFFFF);
    zoom: 1;
  }
  div.demoAB3:hover:before {
    box-shadow: 0 0 10px #D0D9E1 inset;
    color: #FFF;
  }
</style>

<div class="demoAB3">
<img src="URL_IMAGEN" /></div>



<style>
  div.demoAB4 {
    cursor: pointer;
    position: relative;
    text-align: center;
  }
  div.demoAB4:before {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 0 10px #A0A9B1 inset;
    content: "esta es una imagen";
    font-family: Tahoma;
    font-size: 32px;
    height: 48px;
    line-height: 48px;
    opacity: 0;
    padding: 0 10px;
    position: absolute;
    right: 50px;
    top: 20px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }
  div.demoAB4:hover:before {
    right: 160px;
    opacity: 1;
    top: 140px;
  }
  div.demoAB4 img {
    width: 400px;
    -moz-transition: width 1s;
    -webkit-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
  }
  div.demoAB4 img:hover {
    width: 500px;
  }
  div.demoAB4:after {
    content: "efecto mouseover";
    display: block;
    font-weight: bold;
    font-family: Helvetica;
    font-size: 20px;
    text-align: center;
  }
</style>

<div class="demoAB4">
<img src="URL_IMAGEN" /></div>

13 comentarios:

MikeSoft  

Eres un Astro!!
encerio no se como haces para poder poner los estilos en blogger!! O_O
deberias reclutar aprendices ahi estaria yo :D

Responder
Alejandro  

Parece muy potente para poder experimentar nuevos truquitos, y me parece que lo has explicativo cojonudo! parece muy sencillo! voy a practicar!

Responder
Oloman  

De todas las novedades de CSS3, esta es la que más me gusta por la cantidad de aplicaciones que puede tener..

Responder
JMiur  

MikeSoft
Pués no hay mayores problemas para agregar estilos en Blogger porque no hay restricciones.

Alejandro:
Es para eso, para experimentar y ver que sale :D

Oloman:
Realmente es así. Tal vez, es un poco confuso y hay que probar y ver que sale pero podría llegar a tener muchas aplicaciones prácticas.

Responder
Karla  

Esto tiene muy buenas aplicaciones JMiur, y que bueno que aclaraste de lo usar : y doble ::, ya que no siempre lo marcan, cuando lo usan en algunos tutoriales, hace tiempo lo leía en un libro de CSS muy popular de la red llamado libros Web...
...hay un ejemplo de la W3C, muy claro, que puede ayudar a entender como aplicarlo, y explican usándolo en los blockquotes, o citas:

http://www.spanish-translator-services.com/espanol/t/007/roundshadow.html

o acá, en en esta página en inglés, para crear esquinas redondeadas:

http://virtuelvis.com/gallery/css/rounded/

Muy buen tutorial ;) y Salu2!!.

Responder
JMiur  

Veremos de qué se trata :D

Responder
NickJP!^xD  

Amigo tengo un problemita con los navegadores resulta q en firefox chrome y opera la pagina se ve perfecta como la estoy diseñando... pero en IE8 los bordes "redondeados" ni los ribbon = before {}after {} " no funcionan en dicho explorador que me recomiendas hacer ?

q problema con internet Explorer no es nada que todo windows lo trae jaja

Responder
JMiur  

IE8 no interpreta las propiedades de bordes redondeados (border-radius) pero tanto :after como :before funcionan perfectamente.

Tendría que ver cuál es el ejemplo concreto pero, dos detalles a tener en cuenta. Primero, colocar en tu página la etiqueta META correspondiente para indicarle a IE que no use el modo compatibilidad; luego de <head>:

<meta content='IE=8' http-equiv='X-UA-Compatible'/>

Segundo, verificar la configuración del navegador porque por defecto, está en modo compatibilidad y no funciona como 8 sino como 7.

Responder
Graciela  

Guau Jmiur! me encanta, solo tengo que aprender, para cuando la escuela! ;) :P

Responder
JMiur  

Nada de escuelas. Prefiero el patio de juegos :D

Responder
Indeziisoow  

Excelente JMiur, muy buena entrada. :D

Responder
HOMUNFAGO  

Me ha gustad mucho el último efecto, lo acabó de implementar a mis imágenes y han quedado super bien :D

Muchas gracias Jmiur

Responder
JMiur  

Perfecto, HOMUNFAGO :D

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