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.
Background:linear-gradient, text-shadow, text-decoration.
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.
box-shadow simulate 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 {
    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


<a onclick=Tutoriales En Linea" class='avatar avatar-64 photo' height='64' width='64'>
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-03-10
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!