QUICK TIP - Underline Texts -1 Cool Technique in CSS you should know

0 6,819
Screen-Shot-2019-12-12-at-1.46.32-am | A&H Business Technology
Related posts

Underline Texts -Essential Technique in CSS – Typography plays an increasingly important role in web design – especially with the introduction of web-fonts.

Underlining texts, however, is always a rather monotonous endeavour. It could influence the colour and type of underlining. The advanced CSS3 property “text-decoration” gives you additional ways for designing text.

Besides, we also use CSS to hide or customise metadata that you often use when you build your blog or personal website.

“Text-decoration” extended by features – Underline Texts

Up to now, we could use the text-decoration property to specify how a text should be underlined or crossed out. So, we can use the values ​​”underline”, “overline” and “line-through” to decorate the text. This corresponds to the typical formatting, as you know underline texts from the MS Word that you use usually.

In practical context, these options are insufficient in web design because web designers have repeatedly looked for workarounds to give different colours to underlines.

Generally, the web designers has assigned a text with a border (“bottom-bottom”) instead of underlining it with “text-decoration”. This will apply colour and line strength on the text.

However, this approach has its disadvantages. So the underline “border-bottom” is always a little further from the text than a real underline.

Underline Texts
Text underlined in another colour

The CSS property “text-decoration” is an essential technique which has several features. For example, the colour of underlines can display with the different colour from the text colour. There is the new property “text-decoration-color” and we use “rgb ()” and “rgba ()” to specify all common CSS colours

Defining whitespace with Underline Texts

There is another new property: “text-decoration-skip”. Furthermore, we should interrupt an underline to defines the new property. The value “ink” specifies that descenders such as the small “g” and “j” are not available from the underline.

Just this possibility should please many web designers. For the brutal cutting of descenders by underlining is not a nice sight, especially for typographically enthusiastic web designers and developers.

Underline Texts - Essential Tutorials Technique-Underline color text
Underline text with descenders omitted

The value “spaces” on the other hand ensures that underline is not  available in punctuation and spaces. For example, it is possible to use the underlining of enumerations only on the words.

Inline block elements such as images within a text are not underlined if the property has the value “objects”. And the value “edges” specifies that two adjacent text elements represent a space between the underlines.

Change the position of the underline

You can also define the position of an underline – using “text-underline-position”. Usually it is in the range of descenders. However, the value “under” ensures that the line is below the descenders.

Underline colour & change position - Underline Texts
Underline texts with the underline below the descenders

This positioning is useful, for example, in the representation of mathematical formulas. This prevents subscripts from being hidden from the underline and thus poor or unreadable.

Different styles for underlining – Underline Texts

If a simple line does not suffice as an underline, text-decoration-style also allows you to choose between different styles for displaying the lines. While the value “solid” draws a common simple line, “double” offers the possibility of a double Underline Texts.


wavy underline
Underline with a curved line


For curved lines, set the value for the property to “wavy” and for dotted lines to “dotted”.

Distinguish underline by shorthand

As for many other properties, there is also a short form for the new properties and the old property “text-decoration” distinguishes it. The previous use of “text-decoration”, which had allowed only the under or painting, has been spun off in the property “text-decoration-line”, but still works as a short form.

The award “text-decoration: underline” is the short form of “text-decoration-line: underline”. You can combine values ​​for “text-decoration-line”, “text-decoration-style” and “text-decoration-color” as a short form: “text-decoration: underline wavy green”.

In the example, underline is “a green curved line“.

Browsers support

Chrome and Safari support the “text-decoration-skip” property. In addition,  Chrome only knows the values ​​”ink” and “objects” while Firefox supports “Text-decoration-color” and “text-decoration-style”.

The text-decoration-position property is currently only supported by Chrome.

Other browsers are sure to follow suit quickly. After all, typographic CSS properties as well as the trimming of texts or their alignment with other elements have become indispensable in modern web design.

Final words

Underline Texts is an essential tutorial. Firstly, CSS give us many ways to decorate text which make our website more and more beautiful. Secondly, each of method has its own advantages in practical situation of our website.

Therefore, we should select the best way that can mix up with your current design interface on website. It will depend on your graphic design skills and your style.

Besides, you may like with some tips in CSS as below for you referencing.

TinyURL for this post: https://tinyurl.com/yyx7wl7x

Sorry, The Comment Form Is Temporarily Closed At This Time
You may also like

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More