How to Underline Text in CSS?
Tags: css, underline, text
Published: 2020-02-21 09:30:48

---
title: How to Underline Text in CSS?
published: true
description: In this article, you can read an explanation on how to underline text in CSS.
tags: css, underline, text
---

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. 

![Screen-Shot-on-Jan-26th-at-09_11-AM](https://storage.googleapis.com/kolosekblog/2018/01/Screen-Shot-on-Jan-26th-at-09_11-AM.png)

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. 

![Screen-Shot-on-Jan-26th-at-09_20-AM](https://storage.googleapis.com/kolosekblog/2018/01/Screen-Shot-on-Jan-26th-at-09_20-AM.png)
![Screen-Shot-on-Jan-26th-at-09_25-AM](https://storage.googleapis.com/kolosekblog/2018/01/Screen-Shot-on-Jan-26th-at-09_25-AM.png)
![Screen-Shot-on-Jan-26th-at-09_24-AM](https://storage.googleapis.com/kolosekblog/2018/01/Screen-Shot-on-Jan-26th-at-09_24-AM.png)
![Screen-Shot-on-Jan-26th-at-09_27-AM](https://storage.googleapis.com/kolosekblog/2018/01/Screen-Shot-on-Jan-26th-at-09_27-AM.png)
 
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.  

![Screen-Shot-on-Jan-26th-at-09_33-AM](https://storage.googleapis.com/kolosekblog/2018/01/Screen-Shot-on-Jan-26th-at-09_33-AM.png)

It’s still impossible to make dotted wavy underline. Waiting for it :( 

This post was originally published at [Kolosek blog](https://kolosek.com/css-text-underlined/).