CSS text-underline-offset
La proprietà CSS3 text-underline-offset regola la distanza della sottolineatura
La proprietà text-underline-offset permette di spostare la sottolineatura più vicino o più lontano dal testo. È particolarmente utile per migliorare l'accessibilità o l'estetica nei progetti grafici. Può essere impostata con un valore numerico (come 2px) oppure su auto per lasciare la gestione al browser.
Sintassi
Significato dei valori principali:
-
auto: lascia che il browser calcoli automaticamente la distanza tra il testo e la sottolineatura. È il valore predefinito.
-
length: specifica una distanza personalizzata dalla linea di base del testo, usando unità CSS (
px,em,rem, ecc.). Esempio:2px,0.3em.
Esempio proprietà: text-underline-offset
Codice Esempio: text-underline-offset
.text-underline-offset-example {
font-size: 24px;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: #e63946;
}
Contenuto Esempio: text-underline-offset
Esempio di utilizzo di text-underline-offset
In questo esempio, la sottolineatura è spostata di 15px verso il basso rispetto al testo:
CSS e HTML per l'elemento con text-underline-offset:
<style>
.text-underline-offset-example {
font-size: 24px;
text-decoration: underline;
text-underline-offset: 15px;
text-decoration-color: #e63946;
}
</style>
<div class="text-underline-offset-example">
Testo con sottolineatura spostata
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
