Css text decoration position

CSS text-underline-position Property

The text-underline-position property specifies the position of the underline on the element with the text-decoration «underline» value specified.

The text-underline-position is only partially supported by Chrome .

For maximum browser compatibility, extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions) are used with this property.

Initial Value	auto
Applies to	All elements.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.textunderlinePosition = «under»;

Syntax

text-underline-position: auto | under | left | right | above | below | auto-pos | initial | inherit;

Example of the text-underline-position property:

html> html> head> title>Title of the document title> style> p < text-decoration: underline; -webkit-text-underline-position: auto; -ms-text-underline-position: auto; text-underline-position: auto; > style> head> body> h2>Text underline-position property example h2> p>Lorem Ipsum is simply dummy text. p> body> html>

Result

Example of the text-underline-position property with the «under» value:

html> html> head> title>Title of the document title> style> p < text-decoration: underline; -webkit-text-underline-position: under; -ms-text-underline-position: under; text-underline-position: under; text-decoration-color: #1c87c9; font-size: 25px; > style> head> body> h2>Text underline-position property example h2> p>Lorem Ipsum is simply dummy text. p> body> html>

Values

Value	Description
auto	The browser uses its own algorithm to place the line at or under the alphabetic baseline.
under	Forces the underline to be placed under the element’s text content.
left	Forces the element to be placed on the left side of the text in the vertical writing-mode.
right	Forces the element to be placed on the right side of the text in the vertical writing-mode.
above	Forces the line to be above the text.
below	Forces the line to be below the text.
auto-pos	Works the same as auto value.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

Browser support

Practice Your Knowledge

Which statement is incorrect about text-underline-position property?

It’s supported by all browsers. Value «below» forces the line to be below the text. Value «auto-pos» works the same as auto value.

Источник

text-underline-position

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

Try it

Syntax

/* 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: revert; text-underline-position: revert-layer; text-underline-position: unset; 

Values

The user agent uses its own algorithm to place the line at or under the alphabetic baseline.

If the font file includes information about a preferred position, use that value. If the font file doesn’t include this information, behave as if auto was set, with the browser choosing an appropriate position.

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.

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 .

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 .

Formal definition

Formal syntax

Examples

A simple example

Let’s take a couple of simple example paragraphs:

p class="horizontal"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere. p> p class="vertical"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur ac turpis vel laoreet. Nullam volutpat pharetra lorem, sit amet feugiat tortor volutpat quis. Nam eget sodales quam. Aliquam accumsan tellus ac erat posuere. p> 

p  font-size: 1.5rem; text-transform: capitalize; text-decoration: underline; text-decoration-thickness: 2px; > .horizontal  text-underline-position: under; > .vertical  writing-mode: vertical-rl; text-underline-position: left; > 

In this example we set both the paragraphs to have a thick underline. In the horizontal text we use text-underline-position: under; to put the underline below all the descenders.

In the text with a vertical writing-mode set, we can then use values of left or right to make the underline appear on the left or right of the text as required.

The live example looks like this:

Setting text-underline-position globally

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

Browser compatibility

BCD tables only load in the browser

See also

• The text-decoration property is a shorthand for setting most text-decoration properties, including text-decoration-line , text-decoration-color , and text-decoration-style . However, it does not set text-underline-position .

Found a content problem with this page?

This page was last modified on Jun 20, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

text-decoration

The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand for text-decoration-line , text-decoration-color , text-decoration-style , and the newer text-decoration-thickness property.

Try it

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can’t remove the decoration. For example, in the markup

This text has some emphasized words in it.

, the style rule p < text-decoration: underline; >would cause the entire paragraph to be underlined. The style rule em < text-decoration: none; >would not cause any change; the entire paragraph would still be underlined. However, the rule em < text-decoration: overline; >would cause a second decoration to appear on «some emphasized words».

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

text-decoration: underline; text-decoration: overline red; text-decoration: none; /* Global values */ text-decoration: inherit; text-decoration: initial; text-decoration: revert; text-decoration: revert-layer; text-decoration: unset; 

The text-decoration property is specified as one or more space-separated values representing the various longhand text-decoration properties.

Values

Sets the kind of decoration used, such as underline or line-through .

Sets the color of the decoration.

Sets the style of the line used for the decoration, such as solid , wavy , or dashed .

Sets the thickness of the line used for the decoration.

Formal definition

• text-decoration-color : currentcolor
• text-decoration-style : solid
• text-decoration-line : none

• text-decoration-line : as specified
• text-decoration-style : as specified
• text-decoration-color : computed color
• text-decoration-thickness : as specified

• text-decoration-color : a color
• text-decoration-style : discrete
• text-decoration-line : discrete
• text-decoration-thickness : by computed value type

Formal syntax

Examples

Demonstration of text-decoration values

.under  text-decoration: underline red; > .over  text-decoration: wavy overline lime; > .line  text-decoration: line-through; > .plain  text-decoration: none; > .underover  text-decoration: dashed underline overline; > .thick  text-decoration: solid underline purple 4px; > .blink  text-decoration: blink; > 

p class="under">This text has a line underneath it.p> p class="over">This text has a line over it.p> p class="line">This text has a line going through it.p> p> This a class="plain" href="#">link will not be underlineda>, as links generally are by default. Be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks. p> p class="underover">This text has lines above em>andem> below it.p> p class="thick"> This text has a really thick purple underline in supporting browsers. p> p class="blink"> This text might blink for you, depending on the browser you use. p> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• The individual text-decoration properties are text-decoration-line , text-decoration-color , text-decoration-style , and text-decoration-thickness .
• The text-decoration-skip-ink , text-underline-offset , and text-underline-position properties also affect text-decoration, but are not included in the shorthand.
• The list-style attribute controls the appearance of items in HTML and lists.

Found a content problem with this page?

This page was last modified on Apr 20, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

text-underline-position

The text-underline-position property sets the placement of the underline on links or on text with text-decoration: underline; applied.

• auto : the default. The browser will decide between placing the underline at the text’s baseline or under it.
• inherit : inherits the underline position of the parent.
• under : places the underline under the text with extra space to prevent crossing descenders.
• left : for vertical writing modes. This places the line to the left of the text.
• right : for vertical writing modes. This places the line to the right of the text.

Microsoft uses a different set of values for Internet Explorer:

• auto : the default. Places the underline below the text for all languages except Japanese (see the MSDN link in the “More Information” section below for details).
• above : positions the underline above the text. Visually identical to text-decoration: overline;
• below : positions the underline below the text. Note that this is different from under — it will not clear descenders.
• auto-pos works the same as the MS implementation of auto .

At the time of this writing, text-underline-position is only partially supported by Chrome (33+ with experimental flags enabled) and Internet Explorer 6+. Chrome supports the auto , inherit , and under values from the W3C candidate recommendation, while IE supports its own alternate values.

This demo shows the under and below values in the browsers that support them.

* with -webkit prefix and experimental flags enabled in chrome://flags. left and right values not supported.
† with -ms prefix and IE-specific values.

Источник