Capire (e sfruttare) i css pseudo-elements

Sapete cosa sono gli pseudo-elements? Sovente capita di incontrarli qua e là, magari nel sorgente di qualche snippet che abbiamo rapinato da qualche parte, ma fino a quando non ci soffermiamo bene a capirne il significato è probabile che continuiamo ad ignorarli.

Eppure questi pseudo elementi sono potenti, ci permettono di risolvere elegantemente alcuni problemi, o di andare incontro ad alcune esigenze che diversamente sarebbero una scocciatura.

Qui voglio soffermermi su 2 pseudo-elements in particolare: before e after, vediamo un esempio

html

<div id="meow"></div>

css

#meow:before {
  content: 'meow';
  display:block;
  background: #000;
}

Qui dobbiamo capire le seguenti cose:

  • la regola css introdotta va a creare un elemento html all'interno del DOM. Occhio che non lo vedremo nella struttura neanche con firebug!
  • l'elemento creato, contrariamente a quanto si potrebbe pensare, non sarà inserito prima dell'elemento #meow ed a pari livello, ma verra inserito al suo interno, prima di ogni altro elemento figlio! (nel caso di after verrà creato internamente ma dopo ogni altro elemento figlio)
  • la proprietà content deve sempre essere presente, essa inserisce testo all'interno dell'elemento creato, se non si desidera avere del testo basta settarlo uguale ad una stringa nulla.

Capite queste poche cose possiamo già usare questi elementi per risolvere alcuni grattacapi.

Modificare lo stile di un elenco puntato

E se volessimo dei pallini rossi a fianco dei nostri item della lista? State pensando di utilizzare delle immagini?

See the Pen red bullets list by abidibo (@abidibo) on CodePen

Inserire un carattere di fronte ai titoli

Vorrete mica inserire il carattere all'interno del titolo vero? Proviamo ad esempio ad anteporre il carattere > ai titoli.

See the Pen Prepend chars to title by abidibo (@abidibo) on CodePen

E poi?

Vabbè questi erano due esempietti semplici semplici. Naturalmente si possono usare anche in altri modi più furbi. Comunque quello che dovremmo avere imparato è che grazie agli pseudo elements possiamo disporre di 2 elementi in più (che non dobbiamo inserire nel markup, e quindi possiamo tenere il codice più pulito) da utilizzare per stilizzare al meglio o aggiungere informazioni ai nostri elementi originari.

Tutto qua.

Categorie

internet opendata piemonte web jeff php programmazione tutorial curiosita governance vim cucina sviluppo apple hardware imac crisi economia politica torino didattica flash illustrazione ricorrenze lapalisse novita release informazione html5 javascript website musica mootools mercato societa vita lavoro HMI interfaccia utente gino gino-news gino-multimedia modernità usa burocrazia jquery django testing libri nova americana etica impresa solidarietà css comunicazioni trasloco ufficio vita sociale entropia immagini fotografia concorso polymer webcomponents programming crowdfunding progetti finanziamento fallimento opensource deploy otto python