Запретить ":: после", пока `переход` не будет выполнен

Question

Я создаю кнопку, которая при наведении увеличивает ее, а затем появляется символ >. Я не могу понять, как это сделать. Я реализовал все, но единственное, что не работает, это то, что > появляется, как только зависает, и текст переносится.

.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;
}

Answer 1

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;
}