How to customize your underlined text

This is the original style of underline.This entry is a tutorial on how to change the underline in your blog style. This is how your underline will look like:

Style 1 - basic 

This is an underlined text

1. To have this underline style, go to Template > Edit HTML

2. Search for  ]]></b:skin> or ( </style> for classic template).

3. Copy codes below and paste them before/above the codes that you have found just now.

u{
border-bottom:2px solid #f7d9d9;
text-decoration:none;
}

4. You may edit the color of the underline by changing  #f7d9d9 to your own color.
5. Save!

Style 2 - with hover style

This is an underlined text 

By "with hover", I mean the underline will change color when you touched the text. Try to hover your cursor over the text you will see the changes. The step of applying this style is the same as Style 1, just with different codes:

u{
border-bottom:2px solid #f7d9d9;
text-decoration:none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.13s ease-in-out;
}
u:hover{
border-bottom:2px solid #bce1ff;
}

Style 3 - Using image as underline

This is the underlined text

u{
text-decoration:none;
background-image:url(IMAGE URL HERE);
padding-top:6px;
padding-bottom:10px;
}

Replace IMAGE URL HERE with the border image url, get your image url here.

Goodluck and thank you for reading! Any question you can comment down below.