css - 防止“:: after”直到“transition”完成

我正在创建一个按钮，将鼠标悬停时它会增加它的威力，然后出现一个>符号。我不明白该怎么做。我已经实现了所有内容，但是唯一不起作用的是，>一经悬停就会显示，并且文本会被包裹。

.start-quiz > button {
text-align: left;
padding-left: 25px;
width: 100px;
}

.start-quiz > button:hover {
width: 125px;
transition: width 0.5s linear;
}

.start-quiz > button:hover:after {
content: " >";
transition: content 0.5s ease;
}

最佳答案

content不可转换。您可以设置不透明度，然后像这样定义过渡

.start-quiz > button {
  text-align: left;
  padding-left: 25px;
  width: 100px;
}

.start-quiz > button:hover {
  width: 125px;
  transition: width 0.5s linear;
}

.start-quiz > button:after {
  content: " >";
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.start-quiz > button:hover:after {
  visibility: visible;
  opacity: 1;
}

关于css - 防止“:: after”直到“transition”完成，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58258931/