Create Wavy Underline in just 2 lines

Introduction

These days making websites good looking has become a tough job for web developers/designers. So in this article, I am going to show a simple CSS trick to make text little beautiful.

Wavy Underline

Creating a wavy underline is not at all a difficult task, there is no need of any advance CSS methods. We will only deal with just two simple CSS properties. Let's make wavy underline a.

h1{  text-decoration: underline;  text-decoration-style: wavy;}

and you made it

This is how wavy underline would look like

If you wonder about the colored wavy underline

h1{  ...  text-decoration-color: #FFD700;   ...}

Ideas

I have picked some cool things done with wavy underline from the internet so that, you can have a great inspiration of it and make amazing stuffs of your imagination.

Animated Wavy underline

Applications

Here's a list of practical applications of wavy underline.

• Misspelling word highlight

Conclusion

I hope you have find this article helpful to you. Thank you for reading!

Lets connect

• Twitter
• GitHub

Fuel my work with coffees :)