CSS text-underline-position
La proprietà CSS3 text-underline-position imposta la posizione verticale della sottolineatura
Con text-underline-position puoi migliorare la leggibilità di testi sottolineati, evitando che la sottolineatura interferisca con lettere discendenti come g, j o y. È particolarmente utile nei titoli o nei testi grandi, dove i dettagli tipografici sono più visibili.
Sintassi
Significato dei valori principali:
-
auto: il browser determina automaticamente la posizione ottimale della sottolineatura in base al font e al rendering.
-
under: forza la sottolineatura sotto la linea discendente del testo, evitando collisioni con lettere come
g,y,p, ecc. -
left / right: (nei layout verticali) specifica il lato in cui disporre la sottolineatura rispetto alla linea del testo verticale.
Esempio proprietà: text-underline-position
Codice Esempio: text-underline-position
.text-underline-position-example {
font-size: 26px;
text-decoration: underline;
text-underline-position: under;
line-height: 1.5;
}
Contenuto Esempio: text-underline-position
Esempio di utilizzo di text-underline-position
In questo esempio, la sottolineatura è forzata a essere posizionata sotto la parte discendente delle lettere:
CSS e HTML per l'elemento con text-underline-position:
<style>
.text-underline-position-example {
font-size: 26px;
text-decoration: underline;
text-underline-position: under;
line-height: 1.5;
}
</style>
<div class="text-underline-position-example">
g, y, p, q, j — sottolineati in modo leggibile
</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
