HTML _CSS

Link Hover Animation

HiroDaegu 2022. 4. 19. 00:20
728x90
SMALL

글자 클릭 시 밑줄이 그어지는 애니메이션

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Link Hover Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="list">
    <li>
      <a href="#" class="link">Mac</a>
    </li>
    <li>
      <a href="#" class="link">iPad</a>
    </li>
    <li>
      <a href="#" class="link">iPhone</a>
    </li>
  </ul>
</body>
</html>
* {
  font-size: 50px;
}

.list {
  list-style: none;
  text-align: center;
}

.link {
  display: inline-block;
  margin-block: 2px;
  text-decoration: none;
  color: #2598eb;
  position: relative;
}

.link::after {
  content:"";
  width: 100%;
  height: 1px;
  background-color: #6667ab;
  border-radius: 4px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.link:hover::after {
  transform: scaleX(1);
}
728x90
LIST