html - 如何减慢悬停时的文本速度？

Question

我正在尝试制作一个按钮，其中一个文本仅在悬停时出现在另一个文本之前。我做到了，但不能拖延。

看看“让我们”这个词出现的速度有多快。需要放慢速度。

.btn {
  width: 100px;
  height: 100px;
  border: none;
  background-color: mediumseagreen;
  transition: width 0.5s ease;
}

.btn:hover {
  width: 200px;
}

.btn:hover::before {
  content: "Let's ";
}

<button class="btn">
Go
</button>

我尝试使用这个答案 switching out link text on hover - transition , 但它实际上是在替换原文 no?

Answer 1

您可以让文本最初出现并创建宽度的过渡，例如:

.btn {
  width: 100px;
  height: 100px;
  border: none;
  background-color: mediumseagreen;
  transition: width 0.5s ease;
}

.btn:hover {
  width: 200px;
}

.btn::before {
  display:inline-block;
  vertical-align:text-bottom;
  content: "Let's ";
  max-width:0px;
  white-space:nowrap;
  overflow:hidden;
  transition:1s;
}
.btn:hover::before {
  max-width:50px;
}

<button class="btn">
Go
</button>