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