Ver ❯
Herramientas SEO
Tamaño del resultado:
668 x 574
×
Cambiar Orientacion
Cambiar tema, Oscuro/Luz
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>Trucos y efectos de CSS3 - Tutoriales En Linea</title> </head> <body> <style> main { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 39px 0; -select: none; font: 16px / 1.5 Helvetica, sans-serif; } p > a { padding-bottom: 1px; background: linear-gradient(#b4a078, #b4a078) no-repeat; background-size: 100% 1px; background-position: 0 18px; } p > a:hover{ animation: text-underline-slideInLeft 1.2s linear infinite forwards; } @keyframes text-underline-slideInLeft { from { background-position-x: -432px; } 50% { background-position-x: 0; } to { background-position-x: 432px; } } </style> <main ref="main"> <p><a>por favor agregue hermoso efecto de subrayado</a></p> </main> </body> </html>