Come fare un trattino sopra al testo con il CSS

Sottolineare un testo nel linguaggio HTML è abbastanza semplice. Esiste un apposito tag di formattazione dedicato all'operazione di underline, il tag <u>. Ad esempio, per sottolineare la parola Lapaweb è sufficiente scrivere <u>Lapaweb<u>. Il risultato a video il seguente:


Lapaweb

Le cose si complicano se si vuole ottenere l'effetto grafico opposto di overline, ossia per spostare il trattino al di sopra del testo ( sopralineatura ), in quanto non esiste un tag apposito nel linguaggio HTML. Nel caso dell'overline è necessario ricorrere agli stili del linguaggio CSS. Non occorre creare una classe, è sufficiente richiamare l'attributo style con il parametro text-decoration: overline. Ad esempio:

<span style="text-decoration: overline">Lapaweb<span>

Il valore "overline" della proprietà text-decoration consente di applicare la sopralineatura / sovralineatura del testo. Può essere utilizzato sui principali tag di formattazione del testo ( <p>, <b>, ecc. ) e sui tag division ( <div> ), span ( <span> ) e sulle tabelle. Il risultato a video è, quindi, il seguente:


Lapaweb

Pur essendo poco usata, la sopralineatura ( overline ) è molto frequente in matematica. Può, quindi, capitare l'esigenza di voler rappresentare una parola o un carattere con un trattino al di sopra del testo.

Il linguaggio CSS consente di soddisfare questa particolare esigenza di formattazione del testo, altrimenti non prevista dal linguaggio HTML.

 


 

Segnalami un errore, un refuso o un suggerimento per migliorare gli appunti

FacebookTwitterLinkedinLinkedin
knowledge base

Libri di approfondimento
  1. Cos'è il CSS