Css text decoration space

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-offset

The text-underline-offset CSS property sets the offset distance of an underline text decoration line (applied using text-decoration ) from its original position.

Try it

text-underline-offset is not part of the text-decoration shorthand. While an element can have multiple text-decoration lines, text-underline-offset only impacts underlining, and not other possible line decoration options such as overline or line-through .

Syntax

/* Single keyword */ text-underline-offset: auto; /* length */ text-underline-offset: 0.1em; text-underline-offset: 3px; /* percentage */ text-underline-offset: 20%; /* Global values */ text-underline-offset: inherit; text-underline-offset: initial; text-underline-offset: revert; text-underline-offset: revert-layer; text-underline-offset: unset; 

The text-underline-offset property is specified as a single value from the list below.

Values

The browser chooses the appropriate offset for underlines.

Formal definition

Initial value	auto
Applies to	all elements. It also applies to ::first-letter and ::first-line .
Inherited	yes
Percentages	refer to the font size of the element itself
Computed value	as specified
Animation type	by computed value type

Источник

How to Increase the Space Between Text and Underlining in CSS

Unfortunately for web designers, CSS does not provide many options for the underlines below texts. You may have difficulty when trying to increase the gap between a text and its underlining.

In this snippet, we’ll show how to do this. Just follow the steps below!

Create HTML

div> span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. span> div>

Add CSS

div < width: 400px; > span < padding-bottom: 10px; border-bottom: 1px solid #1f67db; line-height: 48px; >

Here you can see the result of our code.

Example of increasing the space between a text and its underlining:

html> html> head> title>Title of the document title> style> div < width: 400px; > span < padding-bottom: 10px; border-bottom: 1px solid #1f67db; line-height: 48px; > style> head> body> div> span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. span> div> body> html>

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

In this example, we increased the space between the text and underlining with a border-bottom. You can control the space using line-height and padding-bottom properties.

Example of increasing the space between a text and its underlining using only a :

html> html> head> title>Title of the document. title> style> span < display: inline-block; border-bottom: 1px solid #000; padding-bottom: 10px; > style> head> body> p> span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. span> p> body> html>

However, you may have difficulty using border-bottom as it may not provide full control over the underlining. To have more pixel accuracy, you can use the :after pseudo-element.

a < text-decoration: none; position: relative; > a:after < content: ''; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; >

You can position the underlining where you want by changing the value of the bottom property.

Example of increasing the space between a text and its underlining using the ::after pseudo-element:

html> html> head> title>Title of the document. title> style> a < text-decoration: none; position: relative; > a:after < content: ''; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; > style> head> body> a href="https://www.w3docs.com/">W3docs a> p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. p> body> html>

It is not possible to increase the space between a text and its underlining if you use the text-decoration property set to “underline”.

Источник

Customize Underlines with text-decoration in CSS

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

They say good things come to those who wait, and this turns out to be very true when it comes to text decoration on the web. The CSS Text Decoration Module Level 3 defines a few great new ways to decorate text on the web, and browsers are finally starting to have good support for them. The times of using border-bottom instead of a proper text underline in order to get a different underline color may finally come to pass.

Results may vary: support is still limited, so the examples in this post may not display correctly depending on the browser you’re using.

text-decoration

The text-decoration property used to be only about a choice between values of none , underline , overline and line-through , but with the new recommendation is becomes a shorthand for the new text-decoration-color , text-decoration-style and text-decoration-line properties. For example, here’s a colored double underline:

.fancy  -webkit-text-decoration: hotpink double underline; text-decoration: hotpink double underline; > 

text-decoration-color

text-decoration-style

text-decoration-style is used to define the type of text decoration, and the new recommendation brings two new values: double and wavy :

.wavy  text-decoration: underline; -webkit-text-decoration-color: salmon; text-decoration-color: salmon; -webkit-text-decoration-style: wavy; text-decoration-style: wavy; > 

text-decoration-line

text-decoration-line accepts values of underline , overline , line-through and blink (blink is deprecated however):

.strike  -webkit-text-decoration-color: red; text-decoration-color: red; -webkit-text-decoration-line: line-through; text-decoration-line: line-through; > 

text-decoration-skip

.ink  -webkit-text-decoration: darkturquoise solid underline; text-decoration: darkturquoise solid underline; -webkit-text-decoration-skip: ink; text-decoration-skip: ink; > 

• objects : The text decoration skips elements that have a display of inline-block . It’s also the initial value:

p class="super"> Getting span style="display: inline-block;">Veryspan> Fancy p> 

.super  -webkit-text-decoration: peru solid overline; text-decoration: peru solid overline; -webkit-text-decoration-skip: objects; text-decoration-skip: objects; > 

The remaining values are not yet well supported by browsers:

• spaces : The decoration skips spaces and punctuation.
• edges : Creates a gap when two elements with text decoration are next to each other.
• box-decoration : The decoration skips any inherited margin, padding or border.

text-underline-position

With text-underline-position we have yet another way to control the positioning of text decoration in relation to the glyphs. The possible values are auto , under , left and right .

With auto , the initial value, browsers will usually place the decoration close to the text baseline:

.auto  -webkit-text-decoration: slateblue solid underline; text-decoration: slateblue solid underline; -webkit-text-underline-position: auto; text-underline-position: auto; > 

…and notice now how, with under , the decoration is placed after the text descenders:

.under  -webkit-text-decoration: slateblue solid underline; text-decoration: slateblue solid underline; -webkit-text-underline-position: under; text-underline-position: under; > 

The left and right values for text-underline-position are used to control text decoration in vertical writing modes.

Now go on and impress us with some fancy text decoration!

Browser Support: As of 2020, Can I Use text-decoration? shows that 94% of browsers worldwide have at least partial support for the property.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Источник