• Home
  • CSS
  • CSS text-decoration property and new styles 2019

CSS text-decoration property and new styles 2019

New styles, tags, functionalities – this is what tiggers like best 🙂 In this post I will show you how to style text using the text-decoration tag and what new styles for lines (underlines, overlines) are available from 2019


We have long been able to use (add or remove) lines as a form of text decoration. By using the text-decoration-line property we will get this effect:

  • underline

  • line-through

  • overline

  • underline overline

To remove the link underline, which is added by default by most browsers, just use the text-decoration property: none;

Text decoration color and style

We can also change the color and shape of the lines, using the text-decoration-color and text-decoration-style properties, obtaining the effects as below:

  • underline solid blue

  • underline double green

  • underline dotted purple

  • underline dashed orange

  • underline wavy red

New CSS styles – 2019

Recently, however, we can also specify the thickness of the line – text-decoration-thickness, its distance from the text – text-underline-offset and the way of displaying underlines and overlines in relation to characters protruding up or down the line (I will show this in an example) – text-decoration-skip-ink.

The above properties are for now (November 2019) read only in Firefox, but hopefully it soon will be implemented by other browsers. So if you read this post using a different browser, you may not see the effect.

Line thickness – text-decoration-thickness

Why set the thickness of the line? This is very useful when styling text for different screen resolutions. While the thin line looks good on a small screen, it can be hardly visible on a large screen, which causes the text to lose its visual value. On a larger screen, you may want to use a thicker underline (or line-through).

small font with standard underline

large font with standard underline

large font with thickness underline

Important! For now, it is best to use a shorthand (since it is fully supported by the Firefox browser): text-decoration: underline solid blue 0.3rem


Using the text-underline-offset property, we can offset the underline of the text to any place up or down ( style=”text-decoration-line: underline; text-underline-offset: 0.4em;” ) Effect:

standard text with underline

standard text with underline


The CSS text-decoration-skip-ink property specifies how underlines and overlines are drawn when they pass above / below the characters that protrude up or down the line. There are two options: auto – underlining is interrupted if the letter overlaps them, and none – underlining is one solid line.

parapsychology – auto option

parapsychology – none option

More information about new styles you can find here: mozilla developer youtube

How do you rate the new styles? Will you use them when they become more available?


Leave a Reply

Your email address will not be published. Required fields are marked *