CSS伪类:hover与::before结合制作按钮装饰_使用:hover ::before显示箭头

P粉602998670 2025-12-02 00:00:00 次阅读

先通过CSS的:hover与::before实现悬停箭头效果，再设置按钮基础样式，利用三角形边框绘制隐藏箭头，最后在悬停时通过opacity和visibility控制其淡入显示。

想让按钮在鼠标悬停时显示一个箭头，可以通过CSS的 :hover 伪类与 ::before 伪元素结合实现。这个方法不修改HTML结构，纯CSS就能完成动态装饰效果。

基本原理

:hover 用于定义鼠标悬停时的样式，::before 可在元素内容前插入装饰性内容。将两者结合，可以让箭头只在悬停时出现，提升交互体验。

HTML结构

只需要一个普通的按钮元素：

CSS样式设置

先为按钮设置基础样式，再用 ::before 插入箭头，并通过 :hover 控制其显示：

.arrow-button {
  padding: 12px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.arrow-button::before {
  content: "";
  position: absolute;
  left: -20px;
  width: 0;

  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid white;
  opacity: 0;
  visibility: hidden;
}

.arrow-button:hover::before {
  opacity: 1;
  visibility: visible;
}