Di buona norma tutti i contenuti di una pagina web vanno inseriti nell’html, lo scopo dei CSS è solo quello di configurare il design (colori, font, forme e così via). Tuttavia, in alcuni circostanze, non possiamo cambiare l’html e dobbiamo trovare dei modi alternativi per aggiungere contenuti. In questa guida vedremo un medoto per inserire contenuti tramite CSS.
La proprietà content e gli pseudo elementi ::after e ::before
I browser moderni ci permettono di fare tantisisme cose con i CSS, tra cui la possibilità di inserire testi o icone utilizzando solamente codice CSS. Questa funzione è resa possibile grazie alla proprietà
content
da utilizzare in accoppiata con gli pseudo elementi
::after
(dopo) e
::before
(prima).
Vediamo un esempio veloce. Supponiamo di avere questa struttura html:
<p class="sitoweb">
<a src="https://studioweb.marketing">studioweb.marketing</a>
</p>Abbiamo un elemento paragrafo con all’interno il link del sito web e dobbiamo inserire un testo prima del link per specificare che si tratta del sito web. Per farlo possiamo prendere come riferimento la classe
sitoweb
dell’elemento genitore
p
, associare la pseudoclasse
::before
e applicare la proprietà
content
.
.sitoweb::before{
content: "Visita il nostro sito: ";
}Risultato finale:
Come è facilmente intuibile, dobbiamo utilizzare
::before
per inserire il contenuto prima e
::after
per inserirlo dopo.
Lascia un commento