Corso HTML e CSS (Lezione 16): I selettori CSS (Parte 4^)

Impariamo a costruire un sito Web

Lezione 16: CSS: Pseudo-elementi

 

Gli pseudo-elementi sono usati per aggiungere effetti ad alcuni selettori.

La sintassi è: selettore:pseudo-elemento {proprietà:valore;}

oppure

selettore.classe:pseudo-elemento {proprietà:valore;}

in quanto anche le classi CSS possono essere usate insieme ad un pseudo-elemento.

 

Vediamoli ora in dettaglio:

a) Pseudo-elemento  : first-letter 

Viene utilizzato per attribuire uno stile alla prima lettera di alcuni specifici selettori (quelli che definiscono un testo). Solo alcune proprietà possono essere specificate per dare uno stile a questa prima lettera. Sono:

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align (solo se “float” = “none”)
  • text-transform
  • line-height
  • float
  • clear

Vediamo un esempio:

Nel CSS scriviamo

h5: first-letter
{
   color:red;
   font-size:22px;
}

e nel body del documento html:

<h5>
   C'era una volta un re...
</h5>

Il risultato sarà:

C‘era una volta un re…

 

b) Pseudo-elemento  :first-line 

Questo pseudo-elemento viene utilizzato per attribuire uno stile alla prima riga di un testo. Anche in questo caso, come per :first-letter, solo alcune proprietà possono essere specificate per dare uno stile a questa prima riga. Sono:

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Ad esempio se nel CSS scriviamo:

h4:first-line
{
   background:yellow;
   font-size:20px;
}

e nella pagina html:

<h4>
   Intestazione<br />
   Prima riga di testo<br />
   Seconda riga di testo
</h4>

il risultato sarà:

Intestazione
Prima riga di testo
Seconda riga di testo

 

c) Pseudo-elemento  :before 

 

Questo pseudo-elemento viene utilizzato per inserire un contenuto prima del contenuto dell’elemento individuato dal selettore.

La proprietà che definisce il contenuto da inserire è content.

 

d) Pseudo-elemento  :after 

Questo pseudo-elemento viene utilizzato per inserire un contenuto dopo il contenuto dell’elemento individuato dal selettore.

La proprietà che definisce il contenuto da inserire è content.

 

Vediamo adesso un unico esempio con i pseudo-elementi :before e :after

Scriviamo nel CSS:

h2:before, h2:after
{
   content: "--- ";
}

se nella pagina html abbiamo:

<h2>
   Capitolo 10
</h2>

il risultato a video sarà:

— Capitolo 10 —

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.