In overall Web design, the most recognizable style is still blue text underlined, which is certainly going to take you somewhere. Link element has that styling by default and it’s the only color in default mode. So we should be respectful of it.
Although, there is a new world outside and old stuff are improved through at least a few stages. Link elements aren’t necessary underlined anymore and line under text isn’t just a link identification today. This quick course is mostly about underline text-decoration CSS option and “linked” options.
First thing first - if you need quick, plain, regular underline, there is always HTML element for it. It is going to make line in the text color on default position from the text. In fact, the element is simply adding text-decoration:underline to the text with the browser's built-in CSS.
Ok, how you probably didn’t need that, following examples are including CSS solutions and surely solution for your problem.
There are two main options for adding the line underneath the text with CSS.
The first one is text-decoration property and it specifies the decoration added to the text. Possible values for this property are underline, overline and line-through. The text-decoration property should be shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style, but this isn’t supported well yet. For now, we have text-decoration and with it, we can add line under, over or through text, with text-decoration-color we can color that line and with text-decoration-style, we can make it double, dotted, dashed or wavy.
The second solution is sort of a hack and it implies the use of a border-bottom. The display property, in this case, must be inline. With this solution we can control the position of the line with a padding-bottom property, thickness of the line with border-bottom-width, style with border-bottom-style and color with border-bottom-color. Border-bottom-style has same options like text-decoration-style has and some 3D effect options. This option offers more options and variables but it’s a trickier for usage.
It’s still impossible to make dotted wavy underline. Waiting for it :(
This post was originally published at Kolosek blog.
Top comments (0)