Text-subliniere-poziție - CSS-Tricks

Anonim

text-underline-positionProprietatea stabilește plasarea subliniere pe link - uri sau pe text cu text-decoration: underline;aplicate.

a ( text-underline-position: under; )

Valori

Acestea sunt valorile specificate în Recomandarea candidatului W3C CSS Text Decoration Module Level 3:

  • auto: implicit. Browserul va decide între plasarea subliniatului la linia de bază a textului sau sub aceasta.
  • inherit: moștenește poziția subliniată a părintelui.
  • under: plasează sublinierea sub text cu spațiu suplimentar pentru a preveni traversarea descendenților.
  • left: pentru moduri de scriere pe verticală. Aceasta plasează linia din stânga textului.
  • right: pentru moduri de scriere pe verticală. Aceasta plasează linia din dreapta textului.

Microsoft utilizează un set diferit de valori pentru Internet Explorer:

  • auto: implicit. Plasați sublinierea sub text pentru toate limbile, cu excepția japonezei (consultați linkul MSDN din secțiunea „Mai multe informații” de mai jos pentru detalii).
  • above: poziționează sublinierea deasupra textului. Vizual identic cutext-decoration: overline;
  • below: poziționează sublinierea sub text. Rețineți că acest lucru este diferit de under- nu va șterge descendenții.
  • auto-posfuncționează la fel ca implementarea MS a auto.

Demo

În momentul redactării acestui articol, text-underline-positioneste acceptat doar parțial de Chrome (33+ cu steaguri experimentale activate) și Internet Explorer 6+. Chrome acceptă auto, inheritși undervalorile de la recomandarea candidat W3C, în timp ce IE suportă propriile valori alternative.

Această demonstrație arată valorile underși belowvalorile din browserele care le acceptă.

Vedeți textul-subliniere-poziționare Pen de către CSS-Tricks (@ css-tricks) pe CodePen.

Legate de

  • decor-text

Mai multe informatii

  • text-underline-position în CSS Text Decoration Module Level 3 CR.
  • text-underline-position la MSDN.

Suport pentru browser

Crom Safari Firefox Operă IE Android iOS
33 * Nici unul Nici unul Nici unul 6 † Nici unul Nici unul

* cu -webkitprefix și steaguri experimentale activate în chrome: // steaguri. leftiar rightvalorile nu sunt acceptate.
† cu -msprefix și valori specifice IE.