如何使用 CSS 创建悬停扩展边框？

Patricia Arquette

发布： 2024-11-16 12:55:03

原创

866 人浏览过

How to Create an Expanding Border on Hover with 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中文网其他相关文章！

来源：php.cn

上一篇：为什么我的嵌套有序列表在 HTML 和 CSS 中显示不正确的编号，如何修复它？下一篇：为什么 CSS 过渡不适用于所有浏览器中的网格模板属性？

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章