:after y :before

: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>