CSS

CSS Set underline color easily with practical code

Spread the love

Here in this post, you will get to know How to set underline color using CSS.

Applying underlines to the headings with beautiful colors makes the visitors eyes to enter the content with enjoyment.

Highlighting text is a key tool to pull the visitors & make them dive into your content world. Headings are the beginnings & acts like a door through which visitors enter your palace of content.

Without quality content there is no success but the users have to be pulled to your content.

Users on the internet are surfing the websites with high speed rates & if the headings are not attractive they will vanish in milliseconds from your application.

Headings can be made attractive by applying various styles including underlines with colors.

So How do you set underline & also how to change the color of underline?

Set Underline Color

There are 2 properties that are used in below example.

Text-decoration property is used to set the underline. Once you set the underline then it will be by default underlined with black color.

Text-decoration-color property is used to set the color of the underline. This property will change only the underline color & not the text color. The text color will remain the same & the underline color will appear different.

CSS :-

        .onlyUnderline {
            text-decoration: underline;
            font-size: 28pt;
        }

        .underlineWithColor {
            text-decoration: underline;
            text-decoration-color: red;
            font-size: 28pt;
        }

HTML :-

        <p class="onlyUnderline">
            I have a underline.
        </p>

        <p class="underlineWithColor">
            I have a underline with red color.
        </p>