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:

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.

Similari
Selettori CSS definiti
15% Css
Se avete appena iniziato con i CSS, è bene avere una comprensione fondamentale di ciò che si intende quando ci riferiscono ai selettori CSS. In questo post farò una breve descrizione dei più noti selettori CSS insieme ad a…
Problemi con il BOM dell’UTF8
8% Php
Diventa un rompicapo, se si ha il BOM UTF8 all’inizio del file PHP, XML o javascript. Questi files devono inviare la loro intestazione prima di ogni altra cosa. A causa della posizione del BOM, che sono i primi bytes del f…
Le 10 funzionalità principali in HTML5
8% Html5
L’HTML5 posside dei nuovi tag da usare per ottenere comportamenti precisi sulla pagina web. In questo post, si elencano i 10 nuovi, non per importanza ma per il vantaggio funzionale che si possono otenere rapidamente senza…
Problemi di Internet Explorer con CSS
7% Css
Cercando di ottenere siti web CSS-based con lo stesso aspetto in tutti i browser spesso può essere difficile. Molti dei problemi invece si trovano con Internet Explorer che implementa dei comandi CSS diversamente da altri,…
Alcuni Tag HTML5 che potrebbero servire
6% Html5
Come sviluppatore front-end senza dubbio si utilizza costantemente HTML e probabilmente ci sono poche incognite. Tuttavia, il modo in cui si è evoluto (in particolare con l’avvento di HTML5) può sorprendere, a volte. In qu…