Per quanto poco utilizzato, conosciamo bene l’importanza di poter barrare un testo per farlo sembrare cancellato senza tuttavia rimuoverlo dalla pagina. Per ottenere questo effetto in puro HTML utilizziamo i tag <s> oppure <del> come spiegato in questa pagina.
Utilizzare gli appositi tag HTML, tuttavia, non è l’unica strada possibile. Grazie all’uso dei CSS, infatti, è possibile ottenere lo stesso risultato. In questo articolo, esploreremo come utilizzare i CSS per barrare il testo in modo semplice ed efficace.
Per scrivere un testo barrato con CSS si farà ricorso alla proprietà text-decoration, la quale potrà essere applicata ad un qualsiasi tag. Un semplice tag <span>, ad esempio, è perfetto per questo scopo.
All’interno del nostro foglio di stile, creiamo quindi una classe “strike” in questo modo:
span.strike {
text-decoration: line-through;
}A generare l’effetto “cancellato”, mediante lo sbarramento del testo, è il valore line-through. Questo valore, se applicato alla proprietà text-decoration, produce un risultato visivo immediato e chiaro.
Ora utilizziamo questo codice nel sorgente HTML della pagina:
Per fare un testo barrato in HTML si utilizza il <span class="strike">tag strike</span>.Come potete notare, cliccando sul pulsante, l’effetto barrato verrà applicato alla porzione di testo racchiusa all’interno del tag <span> con classe “strike”.
Questo metodo offre diversi vantaggi rispetto all’uso diretto dei tag HTML. Prima di tutto, l’uso dei CSS migliora la separazione dei contenuti dalla loro presentazione, rendendo il codice HTML più pulito e mantenibile. Inoltre, permette di riusare la stessa classe in diverse parti del sito senza dover ripetere codice.
Un ulteriore vantaggio dell’utilizzo dei CSS per il testo barrato è la possibilità di personalizzarlo. Ad esempio, possiamo anche cambiare il colore del testo barrato per farlo risaltare ulteriormente. Ecco un esempio di come fare:
span.strike {
text-decoration: line-through;
color: red; /* Cambia il colore del testo barrato in rosso */
}In questo modo, il testo apparirà barrato e di colore rosso, attirando ancor di più l’attenzione dell’utente.
