html - 如何在文本中滑动并将另一个文本推到右边(CSS)

Question

我试图让 > 从侧面移动并将“Lorem”推到右边。我试图在我的 CSS 中实现它。

Answer 1

您可以使用伪元素和transition: max-width

* {
  line-height: 1;
}
span:before {
  max-width: 0;
  overflow: hidden;
  transition: max-width .5s;
  content: '>';
  display: inline-block;
}
span:hover:before {
  max-width: 2em;
}
span {
  display: flex;
  align-items: center;
}

<span>Lorem</span>