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: ";
}
<a class="email-address" href="#">mio@email.com</a>
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!
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.
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
<style>
#main-content a: visited: after {
content: "\2713";
.prezzo: before {
content: "\20AC";
</style>
Esempio dal vivo
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>
title dalla proprietà content come segue:
<style>
a: before {
content: attr(title) ": ";
}
</style>
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.