如何使用 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中文网其他相关文章！