Sintaxi de pseudo-elements

Publicat el 21/03/2004

::first-line

Aquest pseudo-element permet aplicar un estil a la primera línia d'un paràgraf.


p:first-line {
   text-transform: uppercase;
   }

La longitud de la primera línia estarà determinada pel tamany de la font, l'ample de la finestra, etc.

::first-letter

Aquest pseudo-element permet seleccionar la primera lletra d'un paràgraf.


p {
   font-size: 12pt;
   line-height: 12pt;
   }
p:first-letter {
   font-size: 200%;
   font-weight: bold;
   }

Les regles anteriors determinen que els paràgrafs tinguin una lletra capital en negreta del doble de tamany que la resta.

::before i ::after

Amb els pseudo-elements ::before i ::after es pot insertar un contingut abans o després d'un element i definir-ne l'estil.

La propietat content aplicada en aquests pseudo-elements especifiquen el que s'inserta.


h3:before {
   content: "Tema: ";
   }
p:after {
   content: url("icona.png");
   }
body:after {
   content: "Final";
   display: block;
   }

Nota¹: NO funciona en Internet Explorer 6. Si que funciona en Mozilla i en Opera 7.23

Nota²: la nomenclatura pels pseudo-elements de la especifiació de css 2.1 diu que només s'ha de posar (:). Jo ho he marcat amb (::) perquè la especificació de css 3 ho reformula així. Davant del dubte, ara per ara, millor usar (:).

esbudellant estàndards

Menú