Pseudo elementi :before :after

In CSS, con gli pseudo elementi :before e :after si possono fare un sacco di belle cose.

Iniziamo col dire che ogni volta che usiamo uno dei due, per ogni elemento/tag della documento HTML è come se ne avessimo un altro in più, quindi alla fine 1 elemento vale 3.

I due pseudo elementi permettono di creare da zero un nuovo elemento prima o dopo un elemento già esistente.
Questo nuovo elemento può essere acconciato usando qualsiasi comando Css e – cosa più interessante – può essere riempito!

Ad esso può infatti essere attribuita la proprietà content che permette di specificare il contenuto di questo nuovo elemento virtuale.

Content può avere diversi valori:

  • none / normal = nessuno
  • counter-increment / counter-reset= inserisce un numeratore che indica in ordine quanti elementi ci sono
  • attr(attributo) = mostra il valore dell’attributo indicato
  • string = mostra un testo
  • open-quote / close-quote = mette un paio di virgolette
  • no-open-quote / no-close-quote = rimuove le doppie virgolette
  • url(url) = mostra un media (immagine, video, suono, ecc)
  • inherit = specifica che il valore di content debba essere ereditato dall’elemento padre

Qualche esempio pratico sull’uso di questi pseudo elementi…

Ad esempio si può sfruttare ATTR per mostrare l’url di un link nella versione stampata di una pagina html:

@media print {
a[href]:after {
content: " (" attr(href) ") ";
}
}

Forse vi chiederete cosa c’entrino le parentesi quadre…
Quel [href] vuol dire: applica lo stile solo se è usato l’attributo HREF (altrimenti lo stile verrebbe applicato anche se ci fosse solo il tag senza quell’attributo, mostrando in questo caso le due parentesi tonde); vedi kimblim.dk

Si possono creare bordi multipli , creare forme complesse, applicare elementi grafici attorno ad un elemento …e tanto altro.

Nonostante l’immagine a corredo di auqesto articolo, ricordo che dal punto di vista “tridimensionale”, ognuno dei due elementi generati da :before e :after possono avere un proprio z-index, quindi apparire davanti o dietro l’elemento genitore.

Approfondimenti:

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.