Wavy Underline

Updated: February 9, 2021

Add a wavy underline to your text with CSS:

wavy.html

<p>
  Check out
  <a href="https://eneaxharja.com">my own little corner of the web!</a>
</p>

wavy.css

body {
  background-color: #000;
  color: #fff;
  font-size: 24px;
  padding: 64px;
  font-family: sans-serif;
  text-align: center;
}

a {
  color: #3ddc84;
  text-decoration: underline wavy #4285f4;
}
a:hover {
  text-decoration: underline solid #4285f4;
}