如何使用 CSS 建立懸停擴展邊框？

使用 CSS 擴充懸停邊框

您希望當滑鼠懸停在其上時擴充邊框。這是實現此效果的另一種方法：

使用 CSS 變換屬性，特別是 Transform:scaleX()，讓您可以縮放邊框元素。

h1 {
  display: inline-block;
}

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

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

在這種方法中，我們將變換和過渡屬性應用於偽元素（::after）以避免影響文字內容並添加必要的標記。

從向左或向右，相應調整transform-origin屬性：

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

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

透過自訂transform-origin，可以控制邊框擴展的方向。

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