Animated underline
How do I make an animated underline?
What is a animated underline? How do you make a animated underline? This script and codes were developed by Kasper Mikiewicz on 21 November 2022, Monday.
Animated underline - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated underline</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { padding: 5%;
}
.nav { list-style: none; padding: 0;
}
.nav > li { display: inline-block;
}
.nav > li ~ li { margin-left: 1em;
}
.nav a { color: #666; text-decoration: none; direction: ltr;
}
.nav a:focus, .nav a:hover { color: #CF000F;
}
.nav a:focus:after, .nav a:hover:after { opacity: 1; width: 100%;
}
.nav a:after { margin: 0 auto; content: ''; display: block; border-top: 1px solid; border-top-color: inherit; width: 0%; opacity: 0; transition: .25s;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Animated underline</h1>
<ul class="nav"> <li><a href="#">Nav item 1</a></li> <li><a href="#">Nav item 2</a></li> <li><a href="#">Nav item 3</a></li> <li><a href="#">Nav item 4</a></li>
</ul>
<p><small><b>Info:</b> By default line is aligned to center using <code>margin: 0 auto</code>, for left/right aligmnent, remove that <code>margin: 0 auto</code> and use <code>direction: [ltr | rtl]</code>. Line color is inherited from link color.</small></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Animated underline - Script Codes CSS Codes
body { padding: 5%;
}
.nav { list-style: none; padding: 0;
}
.nav > li { display: inline-block;
}
.nav > li ~ li { margin-left: 1em;
}
.nav a { color: #666; text-decoration: none; direction: ltr;
}
.nav a:focus, .nav a:hover { color: #CF000F;
}
.nav a:focus:after, .nav a:hover:after { opacity: 1; width: 100%;
}
.nav a:after { margin: 0 auto; content: ''; display: block; border-top: 1px solid; border-top-color: inherit; width: 0%; opacity: 0; transition: .25s;
}
Developer | Kasper Mikiewicz |
Username | Idered |
Uploaded | November 21, 2022 |
Rating | 3 |
Size | 2,593 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Notifications | 3,250 Kb |
Hello bar | 3,237 Kb |
Dropdown menu | 3,350 Kb |
DragToIncDec | 2,489 Kb |
Comments thread | 3,601 Kb |
Vue.js based Todo list | 5,092 Kb |
2 CSS objects that will simplify your HTML structure | 4,136 Kb |
Love button | 3,597 Kb |
Pure CSS read more toggle | 2,344 Kb |
Pure CSS3 Tags | 4,052 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Count up | Alanshortis | 2,391 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Header | Er40 | 1,542 Kb |
AngularJS Skills | Supro | 3,312 Kb |
Colorful Sliders | Chanrith | 1,246 Kb |
SVG Playground | Roygwells | 1,834 Kb |
C.Rowe Button | Brownerd | 2,473 Kb |
Cool Page Split Effect | Anthonyadamski | 6,128 Kb |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!