ホバーで左から黒帯が伸び、文字色が反転するアニメーション

ホバーで左から黒帯が伸長し、文字色が白に反転する実装メモです。

完成イメージ

通常時：白地・黒文字
ホバー時：左から黒帯が伸長（0→100%）、背景が黒、文字は白

---

コード

index.html

<div class="box">
  <div class="inner">
    <span class="label">ホバー</span>
  </div>
</div>

style.scss

.box {
  width: 250px;
  height: 50px;
  border: 1px solid #000000;

  .inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      width: 0;
      background: #000000;
      transition: width 0.5s ease;
      z-index: -1;
    }
  }

  .label {
    color: #000000;
    transition: color 0.5s ease;
  }

  &:hover {
    .inner::before {
      width: 100%;
    }
    .label {
      color: #ffffff;
    }
  }
}