【CSS】左右対称にバーが展開するアニメーション

2023年10月25日2024年2月26日

やりたいこと

ホバー等でバーが左右対称に展開されるようなアニメーション。

コード

transform: translateX(-50%) scaleX(0);とtransform-origin: center;を使う。

.title {
  position: relative;
  text-align: center;
  padding-bottom: 6px;
  cursor: pointer;
  transition: opacity 0.4s;
  display: inline-block;
}
.title::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  height: 2px;
  width: 40px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  background: blue;
  transition: transform 0.4s;
}
.title:hover {
  opacity: 0.5;
}
.title:hover::after {
  transform: translateX(-50%) scaleX(1);
}