Underlining Text – Now With Different Colors and More Effects

Typography is becoming increasingly more important in web design - especially since the introduction of web fonts. Underlining text, however, has always been a somewhat monotonous endeavor.
Changing the color and style of the underlining was a complicated process. The expanded CSS3 attribute "text-decoration" now gives you additional wiggle room for the design of texts.
Text Underlined in a Different Color[/caption]
Now, several features have been added to the CSS attribute "text-decoration," allowing users to define the underline color regardless of the text color. For that, there's the new attribute "text-decoration-color." All common CSS colors are allowed, as well as entries via "rgb()" and "rgba()".
Underlined Text, With Left Out Descenders[/caption]
The value "spaces" makes sure that punctuation marks and blanks are not underlined. This allows you to only apply the underline to words during enumerations.
Inline-block-elements, like images within a text, are not underlined if the attribute has the value "objects." Additionally, the value "edges" defines the distance between the underlinings of two adjacent text elements.
Underlined Text With the Underline Below the Descenders[/caption]
This placement makes sense when displaying mathematic formulas, for instance. This prevents subscript numbers from being covered by the underline, as it would render them unreadable.
Underlining With a Wavy Line[/caption]
For curved lines, set the attribute value to "wavy," and set it to "dotted" for dotted lines.
"text-decoration" With Additional Features
Until now, the attribute "text-decoration" only allowed you to define how a text should be underlined, or crossed out. The possible values were "underline", "overline", and "line-through". This matches the typical formatting as we know it from word processing. The fact that web designers have been looking for workarounds to underline text in different colors for a while now shows that these options are insufficient for web design. Often, a frame ("border-bottom") has been assigned to a text, instead of underlining it via "text-decoration". This allowed the user to influence color and stroke width. However, this approach does have downsides. Underlining via "border-bottom" is always a bit further away from the text than real underlining. [caption id="attachment_86636" align="alignnone" width="1024"]
Defining White Space for Underlinings
There's another new attribute: "text-decoration-skip." It lets you define when underlining should be interrupted. The value "ink" determines that descenders, like the lower case "g" and "j," are left out of the underline. This option should make a lot of web designers happy. The brutal crossing out of descenders by underlines is not a pleasant view, especially not for typographically passionate web designers and developers. [caption id="attachment_86638" align="alignnone" width="1024"]
Changing the Position of the Underlining
You also get to define the position of underlining - via "text-underline-position." Normally, it is on the level of the descenders. The value "under," however, makes sure that the line is displayed below the descenders. [caption id="attachment_86637" align="alignnone" width="1024"]
Different Underline Styles
If a simple line is not enough for you, you can use "text-decoration-style" and choose from different styles for the display of the lines. While the value "solid" draws the usual regular line, "double" gives you the option to go for a double underline. [caption id="attachment_86639" align="alignnone" width="1024"]