懸停效果：邊框底部的動畫擴展

在這個問題中，目標是創建一個懸停效果，在懸停時擴展元素的底部邊框。為了達到這種效果，我們可以利用變換屬性並在懸停時將其從 0 轉換為 1。

h1 {
  color: #666;
  display: inline-block;
  margin: 0;
  text-transform: uppercase;
}

h1:after {
  display: block;
  content: '';
  border-bottom: solid 3px #019fb6;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}

h1:hover:after {
  transform: scaleX(1);
}

此方法使用偽元素將邊框過渡與文字分開，保留原始 HTML 結構。可以操作transform-origin屬性來從不同方向擴展邊框，如下所示：

h1.fromRight:after {
  transform-origin: 100% 50%;
}

h1.fromLeft:after {
  transform-origin: 0% 50%;
}