如何用 CSS 建立擴充底部邊框懸停效果？

懸停效果：懸停時展開底部邊框

在追求創建視覺吸引力的網站時，您可能會遇到需要添加互動對您的元素產生懸停效果。可以增強您的設計的一個特殊效果是在懸停時擴展底部邊框。

要實現此效果，您可以利用 CSS 的 transform:scaleX() 屬性。透過在懸停時將scaleX屬性從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);
}

但是，如果你想從左或右擴展邊框，你可以修改transform-origin屬性為如下：

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

此程式碼建立一個偽元素來應用邊框和過渡，防止文字本身過渡並維護HTML 的語義結構。

透過實現這些技術，您可以為邊框添加動態且具有視覺吸引力的懸停效果，從而增強用戶體驗並使您的網站脫穎而出。

以上是如何用 CSS 建立擴充底部邊框懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！