Il CSS ha una proprietà chiamata content. Può essere utilizzata solo con gli pseudo elementi :after e :before. È scritto come uno pseudo selettore (con i due punti), ma è chiamato pseudo elemento perché non è in realtà che la selezione di tutto ciò che esiste nella pagina, aggiungendo qualcosa di nuovo alla pagina.
Questo è ciò che fa'

⤽
.email-address:before {
   content: "Indirizzo e-mail: ";
}
Con questo CSS, potremmo scrivere il seguente HTML:
<a class="email-address" href="#">mio@email.com</a>
e si ottiene il seguente risultato:
Forse questo esempio non fa sbavare, ma lo pseduo elemento content può essere molto utile per fare cose interessanti. Andiamo con alcune idee e considerazioni.
Non è contenuto di design!
⤽
La prima considerazione potrebbe essere quella di una separazione netta tra contenuto e disegno. Si sta letteralmente aggiungendo del contenuto di testo alla pagina con dei contenuti provenienti da CSS. Le specifiche ci sono e l’idea è largamente implementata, ma questo non significa che non vale la pena discuterne. Se avete un parere in merito ai content CSS e il suo utilizzo condividetelo nei commenti.

Penso che sia fantastico e perfettamente adatto per CSS. Si consideri l’esempio precedente in cui abbiamo fatto precedere a tutti gli elementi con una classe ‘.email-address‘ il testo “Indirizzo e-mail: “. Si tratta di una decisione di design, dove per la chiarezza dei contenuti, si era deciso che avere il testo prima degli indirizzi di posta elettronica rende più chiaro il contenuto. Forse in una riprogettazione successiva del sito, c’è meno spazio in cui tali indirizzi di posta elettronica vengono visualizzati e si decide che invece di far precedere il testo, è meglio fare apparire una piccola icona al suo posto per risparmiare spazio in larghezza. Questo concorda con l’idea del CSS, in quanto il contenuto HTML non ha bisogno di essere cambiato, è può essere realizzato esclusivamente con i CSS.

Utilizzo dei caratteri speciali
⤽
Se avete bisogno di usare un carattere speciale nel content del CSS, la facenda si fa complicata se non si sa’ qual’è l’entità. Come faccio a capire qual’è il numero ASCII per un determinato simbolo? Questo convertitore può essere di aiuto. Così il simbolo copyright © è © – e il suo numero ASCII è 169. Poi scrivo il numero nel convertitore di entità che lo trasforma in ciò che serve per CSS e per Js.
Ecco alcuni tra quelli utili
⤽
  • \2018 – Virgoletta singola a sinistra
  • \2019 – Virgoletta singola a destra
  • \00A9 – Copyright
  • \2713 – Checkmark
  • \2192 – freccia a destra
  • \2190 – freccia a sinistra
Trick: Checkmark visitati e silmbolo dell'euro (€)
<style>
#main-content a: visited: after {
    content: "\2713";
.prezzo: before {
    content: "\20AC";
</style>
Questo farà apparire il segno di spunta ✓ dopo il link che si è visitato con l’identificativo (id) ‘#main-content‘ e il simbolo dell’€ prima dei prezzi con selettori di classe ‘.prezzo‘.
Esempio dal vivo
⤽
Per visualizzare il codice selezionare il tab HTML o CSS; per il risultato il tab Result.

Utilizzo degli attributi
⤽

Se ci sono degli attributi negli elementi, questi possono essere utilizzati come content dal CSS. Ad esempio, un collegamento ipertestuale potrebbe avere un attributo come title:

<a title="Nome del SitoWeb" href="http://sitoweb.com">Link</a>
è possibile accedere a tale attributo title dalla proprietà content come segue:
<style>
a: before {
    content: attr(title) ": ";
}
</style>
e si ottiene il seguente risultato:
http://sitoweb.com

Ogni attributo può essere preso come tale, nel formato attr(nome-del-attributo). Se vuoi inserire qualcosa nel codice HTML da utilizzare per lo scopo del content CSS (ma nient’altro), è possibile utilizzare il nuovo prefisso data-attribute in HTML5.
Ora questo esempio utilizza l’attributo title, ed altri esempi come questo che si trovano in tutto il web usano anche l’attributo title. È probabilmente quello corretto da usare? Tuttavia, è da notare che i browser hanno i loro propri popups tooltip. Quando questo si attiva, coprirà il nostro. Non c’è modo di sopprimere questo, oltre che semplicemente non utilizzare l’attributo title per questo scopo. I nuovi Custom data attributes dell’HTML5, ancora una volta, potrebbe essere utile qui, giacché ne possiamo creare dei personalizzati e usare questi come tooltip al posto dell’attributo title.