Underline with color & wave effect text decoration

Give normal (boring) underlined links a little makeover using new CSS properties. Add any color to text decoration underlines and even make them stylish with wave (wavy) effect.

Preview

For more information Click Here Now.

Step 1

Assign class vc-text-6 to your text section. If using manual text, then following markup should work.

<p class="vc-text-6">For more information <a href="#">Click Here Now</a>.</p>

Step 2

Add the following CSS code

.vc-text-6 a {
  text-decoration: underline;
  text-decoration-color: #aaa;
  text-decoration-style: wavy; 
  color: #333;
}
.vc-text-6 a:hover {
  text-decoration-color: #4637e7;
}

In the above code, you can change wave or underline color for normal and hover states. If you only want colored underline without the wave effect, then remove text-decoration-style property.

💬 Subscribe for Free, for more CSS magic.

Submit

Loading...

Submit

Loading...

{ very } Thanks

You have successfully joined for Very CSS updates.

For premium CSS Tips & Code.
Click Here to Activate your VeryCSS membership or Login