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
text-decoration-line
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
text-underline-offset
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
text-decoration-skip-ink
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?
