伪元素后的 CSS（过渡） - 如何过渡悬停时显示的内容答案

【问题标题】：CSS (transition) after a pseudo element - how to transition content that shows on hover伪元素后的 CSS（过渡） - 如何过渡悬停时显示的内容
【发布时间】：2013-11-03 22:50:42
【问题描述】：

<!DOCTYPE html>
<html>
<head>
<style> 

div
{
transition:after 3s;
-webkit-transition:after 3s;
}

div:hover:after
{
content:"- positive!";
}
</style>
</head>
<body>

<div>Test</div>

</body>
</html>

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

【问题讨论】：

标签： css css-transitions

【解决方案1】：

after 不是transition 的有效值。

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

HTML

<div>Test</div>

CSS

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

Demo

您还可以在悬停和悬停状态下进行不同的转换。这允许我们延迟显示伪元素，但没有延迟隐藏它。

CSS

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

Demo

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

【讨论】：

赞成最后一句话。我认为即使是最新（不是最新）版本的 Chrome 也可能不完全支持伪元素的转换。最新版本确实如此 :)
您还可以在 hover 状态和 mouseout 状态上进行不同的转换。所以显示伪元素有延迟，但隐藏它没有延迟。像这样：jsfiddle.net/davidpauljunior/vp8Pv
@davidpauljunior 感谢您的建议。我终于将此内容添加到答案中。