Example # 1
Create the HTML file for beginning this code. We are going to start by creating a new file and then selecting HTML as the language in Visual Studio Code. Finally, we are adding the “!” to the file we’ve just generated. This file contains all the HTML’s fundamental tags. All we have to do now is type the HTML body and the CSS file’s link into the “head.” In the body, we are placing a heading and a paragraph in this code. We also create some bold text in this code. Now, we are moving to create the CSS file in which we underline the heading and paragraph and then change the color of this underline. All these will be done by utilizing the CSS properties.
We are aligning all the body elements of the HTML here in the “center” with the help of the “text-align” property. Then, we use the “text-decoration” property and place the “underline” keyword for the value of this property. We use this property here for generating the underline for the heading. We also set the color of this underline by utilizing the “text-decoration-color” property.
Here, we set the color of this underline to “black.” We also generate another underline using the same “text-decoration” property, and this time we generate this underline for the paragraph. We change the color of this underline to “green” by utilizing the “text-decoration-color” property. We also have some bold text, so we are going to generate an underline for this bold text with the help of the “text-decoration” property and also change its color to “red” by using the “text-decoration-color” property.
The output is here, and you can observe that the color of the underline of the heading appears “black,” the paragraph text appears in “green,” and the underline of the bold text is in “red.”
Example # 2
We are utilizing the same HTML code of example 1 here. We use the “text-align” property first for all body elements, and the “font-size” of the body element is “24px”. We “underline” all elements separately using “text-decoration,” and we change the color of the underline with the help of “text-decoration-color.” Here, we are using the “RGB” color as the value of this “text-decoration-color” property. For “h1,” we set “rgb (13, 128, 13),” which is used for the “green” shade. Then, we have “p,” in which we use “rgb (40. 40, 184),” which represents the “blue” color. For the last bold text, “b,” we are using “rgb (216, 69, 15),” which represents “orange.”
The result is shown below, and you can see that the color of the underline of the heading is “green,” the paragraph text is “blue,” and the bold text underlining is “orange.”
Example # 3
Again, we are using the HTML code of example 1 and linking this given CSS file to the HTML file of example 1. All the text of the HTML body aligns to the “center” and of the “24px” “font-size.” We underline all elements heading, paragraph, and the bold text in the same way as we have described in the above example. Here, we are changing the color of these underlines by utilizing “text-decoration-color” and assigning values of the color in the “HSL” form. The “HSL (0, 100%, 50%)” we use here for the heading’s underline shows “red” color. Then we are using “HSL (133, 86%, 47%)” for the paragraph’s underline, which appears as “light green,” and for the bold, we are using “HSL (327, 85%, 33%)” which is for “magenta” color.
The outcome is given below, with the color “red” for the heading underline, “light green” for the paragraph text, and “magenta” for the bold text underlining.
Example # 4
In this example, we are going to change the above HTML code a little bit by adding a link here in this file. Now, we have one heading, one paragraph, a bold text inside this paragraph, and also a link. Now we are going to underline all these and then apply different underline colors for all of them in CSS.
We create the heading’s underline by utilizing the “text-decoration” property and changing its color to “orange” with the help of “text-decoration-color.” After this, we use the “text-decoration” property to generate the bold text underlining and “text-decoration-color” to change the color to “blue.” We set the paragraph’s “font-size” to “22px”. For mentioning the link, we use “a” here with the “hover” and then change the color of the underline to “red,” so it will change the color of the underline of the link when we hover the mouse over this link and also changes its “font-size” on hovering to “20px”.
In the first output, we just underline the heading and the bold text. The heading’s underline appears in “orange” color, and the bold text’s underline appears here in “blue.”
In the second image, you can see the link’s underline color. When we hover the cursor on this link, the color of the underline of the link appears in “red” as we have set it in our CSS code, so it changes its color on the hover.
Example # 5
Here, we have one heading and two different paragraphs with the names “p1” and “p2”. We also have some bold text and a “div,” and also a “span” element. We are going to generate the underline for all these and also change the color of these underlines.
We use “text-align,” and for the value of this property, we set “center” here for all the elements which are present inside the body. We also increased the “font-size” and set it to “25px”. We are utilizing the “text-decoration” property for all elements that we have created in the HTML file by using their names. Then, we also use the “text-decoration-color” property inside the names of all these elements here. We use the color names, RGB color, and also HSL colors here. For the heading and the first paragraph “p1”, we are using the underline color in “RGB,” for the second paragraph “p2” and bold “b,” we are utilizing “HSL” color for the underline, and for the “div” and “span” element, we are using color names in the “text-decoration-color” property. In this way, we generate the underline and change the color of the underline of all elements.
In the screenshot below, the underline of all the elements renders in different colors because we set these colors in the above CSS file.
Conclusion
We have written this tutorial explaining how to change the color of the underline in CSS. We have discussed the property of CSS, which is utilized for altering the color of the underline. We have explained in detail that the “text-decoration-color” property is utilized for changing the underline’s color. We have elaborated different examples here in which we have utilized this property and explained the code as well as output for your better understanding. After learning this tutorial carefully, you will utilize this property in your codes.
