DEV Community

Cover image for Create Wavy Underline in just 2 lines
Dhairya Shah
Dhairya Shah

Posted on • Originally published at codewithsnowbit.hashnode.dev

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;
}
Enter fullscreen mode Exit fullscreen mode

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; 
  ...
}
Enter fullscreen mode Exit fullscreen mode

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!

Let’s connect

Fuel ⛽ my work with coffees :)

Discussion (0)