Jugando con :after y :before

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