Text-underline-position - Trucchi CSS

Sommario

La text-underline-positionproprietà imposta il posizionamento della sottolineatura sui link o sul testo con text-decoration: underline;applicato.

a ( text-underline-position: under; )

Valori

Questi sono i valori specificati nella raccomandazione del candidato di livello 3 del modulo di decorazione del testo CSS del W3C:

  • auto: il predefinito. Il browser deciderà se posizionare la sottolineatura sulla linea di base del testo o sotto di essa.
  • inherit: eredita la posizione di sottolineatura del genitore.
  • under: posiziona la sottolineatura sotto il testo con uno spazio aggiuntivo per evitare di incrociare i discendenti.
  • left: per modalità di scrittura verticale. Ciò posiziona la riga a sinistra del testo.
  • right: per modalità di scrittura verticale. Ciò posiziona la riga a destra del testo.

Microsoft utilizza un diverso insieme di valori per Internet Explorer:

  • auto: il predefinito. Inserisce la sottolineatura sotto il testo per tutte le lingue eccetto il giapponese (vedere il collegamento MSDN nella sezione "Ulteriori informazioni" di seguito per i dettagli).
  • above: posiziona la sottolineatura sopra il testo. Visivamente identico atext-decoration: overline;
  • below: posiziona la sottolineatura sotto il testo. Nota che questo è diverso da under- non cancellerà i discendenti.
  • auto-posfunziona allo stesso modo dell'implementazione MS di auto.

Demo

Al momento della stesura di questo documento, text-underline-positionè supportato solo parzialmente da Chrome (33+ con flag sperimentali abilitati) e Internet Explorer 6+. Chrome supporta i auto, inheritei undervalori della raccomandazione W3C candidato, mentre IE supporta i propri valori alternativi.

Questa demo mostra i valori undere belownei browser che li supportano.

Vedere la posizione della sottolineatura del testo della penna di CSS-Tricks (@ css-tricks) su CodePen.

Relazionato

  • decorazione del testo

Maggiori informazioni

  • text-underline-position nel modulo CSS Decorazione testo livello 3 CR.
  • text-underline-position in MSDN.

Supporto browser

Cromo Safari Firefox musica lirica IE Android iOS
33 * Nessuna Nessuna Nessuna 6 † Nessuna Nessuna

* con -webkitprefisso e flag sperimentali abilitati in chrome: // flags. lefte rightvalori non supportati.
† con -msprefisso e valori specifici di IE.

Articoli interessanti...