Texto subrayado en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales de texto subrayado - text underline en CSS3.
Hay muchos problemas con el efecto de subrayado implementado por text-decoration: underline, como la incapacidad para controlar la ubicación, la incapacidad para evitar (el navegador text-decoration-skip casi no es compatible) y, lo que es más importante, realmente molesta obsessive-compulsive disorder. Además, los diferentes idiomas tienen diferentes hábitos de alineación, el chino está alineado en el centro y el inglés está alineado con la línea de base, por lo que es altamente recomendable implementar guiones bajos personalizados.

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

<main ref="main">
    <p><a>por favor agregue hermoso efecto de subrayado</a></p>
</main>

Ver resultado