Pseudo-elementos: before e after

Estes pseudo-elementos permiten engadir unha porción de texto antes ou despois de calquera elemento HTML:

selector:before{
propiedade1:valor1;
...
propiedadeN:valorN;
}

selector:after{
propiedade1:valor1;
...
propiedadeN:valorN;
}

É importante que a regra de estilo posea a propiedade content que acepta como valor o texto a amosar antes ou despois do elemento HTML. Tamén é interesante a propiedade display que acepta como valores, entre outros, line e block para amosar o texto en linea co texto anterior ou nun bloque novo.

Exemplo de regras de estilo:

p:after {
font-size: 12px;
  font-weight:bold;
  color:red;
  text-align: right;
  display:block;
}
.final:after {
content: "Data: 01-01-2005";
}

Exemplo de código:

<p>parágrafo inicial</p>
...
<p class="final">Este é o último parágrafo. O seu class e 'final' e polo tanto aplicaraselle a regra .final:after </p>

Visualización (excepto en Internet Explorer):

parágrafo inicial

...

Este é o último parágrafo. O seu class e 'final' e polo tanto aplicaraselle a regra .final:after

Seguinte