<a href="#" class="red">Волнистое подчеркивание</a>
<br>
<br>
<a href="#" class="blue">Пунктирное подчеркивание</a>

a {
  font-size: 24px;
  text-decoration: none;
  transition: .3s;
  color: #000;
}

.red {
  background: linear-gradient(-45deg, transparent 40%, red 0, red 60%, transparent 0) 0 1em,
	            linear-gradient(45deg, transparent 40%, red 0, red 60%, transparent 0) .1em 1em;
  background-repeat: repeat-x;
	background-size: .2em .1em;
}

.blue {
  background: linear-gradient(90deg, blue 66%, transparent 0) repeat-x;
	background-size: .2em 2px;
	background-position: 0 1em;
}

body {
  text-align: center;
}