<!DOCTYPE html> <html> <head> <style type="text/css"> body {background: #f2f2f2; margin: 50px;} p {font-size: 1.5em;} a { text-decoration: none; position: relative; color: #3366FF; } a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; border-bottom: 2px solid #3366FF; transition: 0.4s; } a:hover:after { width: 100%; } </style> </head> <body> <h1>CSS Animated Underline Links</h1> <p>Example of animated links using only css code, these links are animated using the css property <a href="https://www.cssportal.com/css-properties/transition.php">transition</a>, the animation goes from left to right, but can be easily changed to go right to left.</p> <p>Check out the blog post at <a href="https://www.cssportal.com/blog/css-animated-underline-links/">CSS Portal</a></p> <p><a href="#">Another link just to show you the animation</a></p> </body> </html>
Sorry, you need iframes to use Tryit Editor.
