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

まずは右から左

• Demo | JSFiddle

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: hidden と transform: translateX(100%) を使った場合

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

• Demo - oveflow: hidden, transform: translateX(100%) | JSFiddle
• Demo - oveflow: hidden, margin-left: 100% | JSFiddle

.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 を使った場合

• Demo - box-shadow | JSFiddle

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

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

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

.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;
}