Texto subrayado en CSS3

Tutoriales En Linea 🎓 » Diseño Web » Texto subrayado en CSS3

text-decoration: underline wavy #34495e achieve wavy underline effect

<style>
  main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 39px 0;
    user-select: none;
    font: 16px / 1 Helvetica, sans-serif;
  }
  p > a {
    text-decoration: underline wavy #b4a078;
  }
</style>

<main ref="main">
    <p><a>Trucos de CSS3 que los desarrolladores de web necesitan saber!</a></p>
</main>

Ver resultado

Contras: Apenas es compatible con los navegadores text-decoration: underline wavy #34495e, además, no podemos controlar el tamaño de la línea ondulada por separado.