伪元素后的 CSS(过渡) - 如何过渡悬停时显示的内容

Question

div {
  transition: after 3s;
  -webkit-transition: after 3s;
}
div:hover:after {
  content: "- positive!";
}

<div>Test</div>

<小时 />

我在上面有这个示例代码。我正在尝试使用"过渡"，以便文本："-积极！"需要3秒钟才能滑动/显示。但它不起作用..如何解决？

Answer 1

after 不是 transition 的有效值。

而是将transition作为:after选择器的属性。

div:after {
  content: " - positive!";
  position: relative;
  opacity: 0;
  top: -20px;
  -webkit-transition: all 3s;
  transition: all 3s;
}
div:hover:after {
  opacity: 1;
  top: 0px;
}

<div>Test</div>

您还可以在悬停进入和悬停状态上具有不同的过渡。这允许我们有延迟来显示伪元素，但没有延迟来隐藏它。

div:after {
  content: " - positive!";
  position: relative;
  opacity: 0;
  top: -20px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}
div:hover:after {
  opacity: 1;
  top: 0px;
  -webkit-transition: all 3s;
  transition: all 3s;
}

<div>Test</div>

以下是支持伪元素转换的浏览器列表：http://css-tricks.com/transitions-and-animations-on-css-generated-content/