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
.
Html ⊚
Esistono dei caratteri che non possono essere digitati direttamente nel codice sorgente di una pagina HTML.Se vengono inseriti, infatti, la visualizzazione della pagina viene compromessa ed appaiono dei caratteri strani……

Zend ⊚
Zend Framework è un framework open source per PHP. Zend Framework separa la logica e le azioni usando il pattern MVC (Model View Controller). Cosa è lo Zend Framework? Framework per la costruzione di siti web più veloci e …

JQuery ⊚
jQuery stà diventando rapidamente uno strumento che ogni sviluppatore web di interfacce dovrebbe conoscere. Lo scopo di questo libro è di fornire una panoramica della biblioteca, in modo che qu…
Python ⊚
Python para todos è un libro sulla programmazione in Python. Questo è un tutoriale su Python adatto a tutti i livelli e si può scaricare in pdf gratuitamente in spagnolo. Il tutoriale di Python…
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…