back to top

Testo barrato con CSS: simulare tag strike HTML

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.

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, può andare benissimo).

All’interno del nostro foglio di stile creiamo, quindi, una classe "strike" in questo modo:

<style type="text/css">
span.strike
{
  text-decoration: line-through;
}
</style>

A generare l’effetto "cancellato", mediante lo sbarramento del testo, è il valore line-through.

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>.

Prova il codice

Come potete notare, cliccando sul pulsante, l’effetto barrato verrà applicato alla porzione di testo racchiusa all’interno del tag span con classe "strike".

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Stilizzare HR (linee orizzontali) in puro CSS

Il tag <hr> (Horizontal Rule) è un elemento HTML...

Immagini riflesse con CSS

Il Flipping è una tecnica utilizzata dai grafici per...

Applicare un bordo alle lettere di un testo con CSS

Con l'avvento di CCS3 il linguaggo di stilizzazione delle...

CSS: dimensioni relative alla viewport con vw, vh, vmin e vmax

Con l'avvento e la diffusione di CSS 3 e...

Rimuovere CSS inutilizzato

Soprattutto quando si gestiscono progetti Web based di grandi...

CSS: centrare orizzontalmente un elenco puntato

Il sistema migliore per scrivere un buon menu è...
Pubblicità