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].

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
  https://codepen.io/codewithsnowbit/pen/qBxVJbm

Conclusion

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

Let’s connect

• Twitter
• GitHub

Fuel ⛽ my work with coffees :)