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 alcune 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 tantissime 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