This page is Not Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

text-underline

Summary

Unsupported.

The ‘text-underline’ property is the shorthand for 'text-underline-style’, 'text-underline-width’, 'text-underline-color’, ‘text-underline-mode’ and 'text-underline-position’.

Overview table

Initial value
not defined for shorthand properties
Applies to
all elements with textual content, including generated content
Inherited
No
Media
visual
Computed value
specified value (except for initial and inherit)
Animatable
No
CSS Object Model Property
N/A
Percentages
N/A

Syntax

  • text-underline: text-underline-color
  • text-underline: text-underline-mode
  • text-underline: text-underline-position
  • text-underline: text-underline-style

Values

text-underline-style
This property specify the line style for underline.

Possible values: none/solid/double/dotted/dashed/dot-dash/dot-dot-dash/wave

text-underline-color
This property specifies the line color for the underline.
text-underline-mode
This property set the mode for the underline determining whether the text decoration affects the space characters or not. ‘Space characters’ are all characters classified by the Unicode Standard [UNICODE] as category 'Zs’, in addition to the white space characters.

Possible values: continuous/skip-white-space

text-underline-position
This property sets the position of the underline. It can appear either ‘before’ (above in an horizontal flow) or after (below in an horizontal flow) the run of text in relation to its baseline orientation. This property is typically used in vertical writing context where it may be desired to have the underline appear ‘before’ the run of text. This results in having the underline appearing on the right side of the vertical writing column.

Possible values: auto/before-edge/alphabetic/after-edge

Examples


View live example

Usage

 The property text-underline is not supported by any of listed new browsers (Chrome/FF/Opera/IE10).

Instead use text-decoration: underline.

The possible exception is text-underline-position: /css/properties/text-underline-position.

Notes

The ‘text-decoration’ property has limitations stemming from its syntax, precluding fine control over each of those formatting effects. Specifically, it offers no way to control the color or line style of the underline, overline or line-through. CSS3 extends the model by introducing new properties allowing additional controls over those formatting effects. CSS3 also makes turning these formatting effects on or off possible without affecting any other ‘text-decoration’ settings.

See also

Related articles

CSS Font