Introduction to CSS Text Underline
In this article, we will learn about CSS Text Underline. Cascading Style Sheet is all about presentation. The better we make use of styling, the more perfect the presentation will be. Having said that, one must know that there is a lot of detailing that must be taken care of while styling through CSS. For a simple example, let us take underlining the text. Now, simple underlining of text can be done using the text-decoration property. But to fix the detailing, we must go into its intricacies and fix the positioning and offset properties. We will be discussing just that in this article. text-underline-position and text-underline-offset are enhancing features to add on to the underline provided by the property text-decoration: underline.
Syntax in Text Underline
1. Text-underline-position: This property defines the position of the underline with respect to the text.
The syntax for this is:
text-underline-position: auto| under| left| right| above
Explanation to the above syntax: Here, the value auto chooses a positioning for the underline and using the value under makes sure that the line is not crossing the descenders, for example, the case of subscripts whereas the value above crosses over the descenders. The left and right position of the underline is the same as under in case if the writing mode for the text is horizontal. They come in use when the mode of the text is switched to vertical. We can decide whether the underline will lie towards the left or right of the text.
2. Text-underline-offset: This is not a sub-property of text-decoration property. This property sets the offset distance of an underline with regards to its original position. Offset distance here means the distance from a defined path.
The syntax for this can be:
text-underline-offset: length
Explanation to the above syntax: Here, length can be given in units like em or cm. They will decide the length of the offset distance. However, this property is not supported by many browsers including Chrome. So it is best to make your way around it while styling your text.
Example to Implement in CSS Text Underline
Below are the examples to implement for the same:
Example #1
Demonstrating text-outline-position with values above and under and observing the difference.
4.5 (4,802 ratings)
View Course
- In this example, we will test text-underline-position with two values i.e. above and under. We can observe the fine difference between the two values of the property in the respective output.
- Firstly, we will create a CSS file, since we are using external CSS.
- We will create a class where we will use short-hand property text-decoration, to style the underline. Next, we will use text-underline-position and define it asunder. We can add other features as we like. The code for the CSS class should look like this:
Code:
.class1{
text-decoration: underline double green;
text-underline-position: under;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
- Similar to the above, we will define another CSS class, and keep the text-underline-position as above. The code should be similar to the one given below:
Code:
.class2{
text-decoration: underline double purple;
text-underline-position: above;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
- The final CSS code should be similar to this:
Code:
.class1{
text-decoration: underline double green;
text-underline-position: under;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.class2{
text-decoration: underline double purple;
text-underline-position: above;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
- Next, we will create an HTML page. Also, make sure to call the external CSS file in the page. Since we have defined CSS classes, we can use them with any HTML element for applying the style to that particular element. In this example, we will use it with the heading element i.e. <h2>. The final HTML code should look similar to this:
Code:
<html>
<head>
<title>Text-decoration property</title>
<link rel = "stylesheet" href = "underline.css">
</head>
<body>
<h2 class="class1">Testing text underline position: under</h2>
<h2 class="class2">Testing text underline position: above</h2>
</body>
</html>
Output:
- We can clearly see, by making the position as under or above, we can attain two different styles of underline the text content.
Example #2
Demonstrating text-outline-position with writing mode and observing the difference in values left and right
- For this example, we should be clear on what writing mode is. Basically, this is also a CSS property that defines how the text should be aligned i.e. horizontally in direction left to right or vertically in direction top to bottom. Now, to demonstrate the values left and right for the underline position, we will use the vertical writing mode.
- Similar to the first example, we will define CSS classes to style for two different position values. The first class will be coded for the underline position to be on the left side. The code should look similar to the snippet below:
Code:
.class1{
writing-mode: vertical-lr;
position: absolute;
padding-right: 100px;
text-decoration: underline double green;
text-underline-position: left;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
- The second class should have the underline towards the right of the vertically aligned text. The code should be similar to below:
Code:
.class2{
writing-mode: vertical-lr;
padding-left: 100px;
text-decoration: underline wavy purple;
text-underline-position: right;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
- The final CSS file should be something like the code below:
Code:
.class1{
writing-mode: vertical-lr;
position: absolute;
padding-right: 100px;
text-decoration: underline double green;
text-underline-position: left;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.class2{
writing-mode: vertical-lr;
padding-left: 100px;
text-decoration: underline wavy purple;
text-underline-position: right;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
- The final HTML page should call the external CSS and should include both the classes while styling elements. The code for the HTML page should be like below:
Code:
<html>
<head>
<title>Text-decoration property</title>
<link rel = "stylesheet" href = "underline.css">
</head>
<body>
<h2 class="class1">Testing text underline position: left</h2>
<h2 class="class2">Testing text underline position: above</h2>
</body>
</html>
- Save this code and open the HTML file through a browser. The final output should look somewhat similar to the screenshot below:
Output:
Example #3
Using text-underline-position in Inline Style CSS
- In this example, we will create an HTML file and call the inline style CSS for defining the underline style for some texts. The final HTML code should look like this:
Code:
<html>
<head>
<title>text-decoration property</title>
</head>
<body>
<h1 style="writing-mode: vertical-rl; text-decoration: underline red; text-underline-position: left;">THIS IS INLINE CSS FOR TEXT UNDERLINE</h1>
</body>
</html>
- Save the file and open through a browser, the final output should look like this:
Output:
Thereby, we saw how to make use of text-underline-position property while styling through CSS. This is a feature or property which can be used for finer details. It can be called an enhancement property and used for special purposes.
Recommended Articles
This is a guide to CSS Text Underline. Here we discuss syntax and examples to implement in CSS Text Underline with proper codes and outputs. You can also go through our other related articles to learn more –
