Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

左から右方向に向けて下線を消す

まずは右から左

Hugo Doc で見かけたスタイル、アニメーションである。

.link {
  display: inline-block;
}

.link::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
}

.link:hover::after {
  width: 0;
  transition: width 0.5s ease;
}

左から右に消す

oveflow: hiddentransform: translateX(100%) を使った場合

transform: translateX(100%)margin-left: 100% に置き換えても良い。

.link {
  display: inline-block;
  overflow: hidden; /* <- */
}

.link::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
}

.link:hover::after {
  transform: translateX(100%); /* <- */
  transition: transform 0.5s ease;
}

box-shadow を使った場合

box-shadow を使った場合、"消す" ように見せるのであれば背景色に合わせて影の色を指定しないといけない。

それと、box-shadow ではコンテンツ幅の分影を伸ばすということが出来ないのが、この作りでは何かと面倒なことになる。不揃いな幅のコンテンツにこのスタイルを適用するとアニメーションスピードがコンテンツ毎にバラついたり、何かと。

あまり良くないので、margintransform のほうを使おう。

.link {
  display: inline-block;
}

.link::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
}

.link:hover::after {
  box-shadow: inset 8em 0 0 #fff; /* <- */
  transition: box-shadow 0.5s ease;
}