如何实现鼠标悬停时显示左右箭头的‘杆状部分’效果？（参考Stripe）

当然可以用Font Awesome实现这个效果，下面提供两种可行方案：

方案一：Font Awesome图标切换 #

利用Font Awesome的两个图标（纯箭头fa-angle-right和带杆箭头fa-long-arrow-right），通过CSS控制悬停时的显示状态：

HTML代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />

<button>
  Hover Me
  <i class="fa-solid fa-angle-right"></i>
  <i class="fa-solid fa-long-arrow-right"></i>
</button>

CSS代码 #

button {
  background: #0a2540;
  border: 0;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  outline: 0;
  padding: 8px 15px;
  position: relative;
}

button i {
  margin-left: 10px;
  transition: opacity 0.2s ease;
}

/* 默认隐藏带杆箭头 */
button .fa-long-arrow-right {
  position: absolute;
  right: 15px;
  opacity: 0;
}

/* 悬停时切换显示状态 */
button:hover .fa-angle-right {
  opacity: 0;
}

button:hover .fa-long-arrow-right {
  opacity: 1;
}

方案二：CSS绘制杆状部分（无需额外图标） #

如果不想用两个图标，也可以直接用CSS伪元素画出杆状线条，悬停时显示：

HTML代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />

<button>
  Hover Me
  <i class="fa-solid fa-angle-right"></i>
</button>

CSS代码 #

button {
  background: #0a2540;
  border: 0;
  border-radius: 50px;
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  outline: 0;
  padding: 8px 15px;
  position: relative;
}

button i {
  margin-left: 10px;
  position: relative;
  transition: margin-left 0.2s ease;
}

/* 用伪元素画杆，默认隐藏 */
button i::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 1px;
  background-color: #fff;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 悬停时显示杆，并调整箭头位置 */
button:hover i::before {
  opacity: 1;
}

button:hover i {
  margin-left: 18px;
}

两种方案都能实现类似Stripe的悬停效果，方案一依赖Font Awesome的图标，方案二更轻量化，可根据需求选择。

内容的提问来源于stack exchange，提问作者Parit Sawjani