이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 참여해서 번역을 마치도록 도와 주세요!
English (US)의 문서도 읽어보세요.

The text-underline-position CSS property specifies the position of the underline which is set using the text-decoration property's underline value.

/* Single keyword */
text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* Multiple keywords */
text-underline-position: under left;
text-underline-position: right under;

/* Global values */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: unset;
Initial valueauto
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Syntax

Values

auto
The user agent will use its own algorithm to place the line at or under the alphabetic baseline.
under
Forces the line to be set below the alphabetic baseline, at a position where it won't cross any descenders. This is useful for ensuring legibility with chemical and mathematical formulas, which make a large use of subscripts.
left
In vertical writing-modes, this keyword forces the line to be placed on the left side of the text. In horizontal writing-modes, it is a synonym of under.
right
In vertical writing-modes, this keyword forces the line to be placed on the right side of the text. In horizontal writing-modes, it is a synonym of under.
auto-pos
A synonym of auto, which should be used instead.
above
Forces the line to be above the text. When used with East-Asian text, using the auto keyword will lead to a similar effect.
below
Forces the line to be below the text. When used with alphabetic text, using the auto keyword will lead to a similar effect.

Formal syntax

auto | [ under || [ left | right ] ]

Examples

Because the text-underline-position property inherits and is not reset by the text-decoration shorthand property, it may be appropriate to set its value at a global level. For example, the under value may be appropriate for a document with lots of chemical and mathematical formulas, which make a large use of subscripts.

:root {
  text-underline-position: under;
}

Specifications

Specification Status Comment
CSS Text Decoration Module Level 3
The definition of 'text-underline-position' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-underline-positionChrome Full support 33Edge Full support 12Firefox No support NoIE Full support 6Opera No support NoSafari No support NoWebView Android Full support 4.4.3Chrome Android Full support 33Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
underChrome Full support 33Edge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android Full support 4.4.3Chrome Android Full support 33Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
left and rightChrome Full support 71Edge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android Full support 71Chrome Android Full support 71Firefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
above and below
ExperimentalNon-standard
Chrome No support NoEdge Full support 12Firefox No support NoIE Full support 6Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
auto-pos
ExperimentalNon-standard
Chrome No support NoEdge Full support 12Firefox No support NoIE Full support 6Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

See also

문서 태그 및 공헌자

최종 변경자: mdnwebdocs-bot,