Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/animated-underline.html

Created December 4, 2019 19:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save prof3ssorSt3v3/e43a2d9102abf8bb922fed5eca9b463d to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/e43a2d9102abf8bb922fed5eca9b463d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
animated-underline.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Animated Link Underline</title>
<style>
html {
font-size: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
line-height: 1.7;
}
.menu {
list-style: none;
list-style-position: inside;
width: 300px;
margin: 0;
padding: 0;
background-color: #333;
}
.menu-item {
background-color: #333;
margin: 0;
padding: 0;
padding-bottom: 0.2rem;
}
.menu-link {
color: goldenrod;
text-decoration: none;
display: block;
padding: 0.5rem 2rem 0 1.2rem; /* padding-bottom is space between text and underline */
border: 0;
margin: 0.5rem 0;
font-size: 1rem;
font-weight: 300;
line-height: 1.4;
position: relative; /* used with absolute for positioning underline */
}
.menu-link:after {
position: absolute;
content: "";
display: block;
bottom: 0;
left: 0;
height: 2px;
line-height: 1;
width: 100%;
background-color: goldenrod;
transform-origin: right bottom;
transform: scaleX(0);
transition: transform 0.4s linear;
}
.menu-link:hover:after,
.menu-link:active:after {
transform: scaleX(1);
transform-origin: left bottom;
transition: transform 0.4s linear;
}
li:nth-of-type(2) .menu-link:after {
background-color: magenta;
left: auto;
right: 0;
transform-origin: left bottom;
}
li:nth-of-type(2) .menu-link:hover:after,
li:nth-of-type(2) .menu-link:active:after {
transform-origin: right bottom;
}
</style>
</head>
<body>
<ul class="menu">
<li class="menu-item"><a href="#" class="menu-link">Link 1</a></li>
<li class="menu-item"><a href="#" class="menu-link">Long Link 2</a></li>
<li class="menu-item"><a href="#" class="menu-link">Link 3</a></li>
<li class="menu-item"><a href="#" class="menu-link">Longer Link 4</a></li>
<li class="menu-item">
<a href="#" class="menu-link">Longest Link 5</a>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment