伪元素之后的 CSS（过渡） - 如何过渡悬停时显示的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19579340/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS (transition) after a pseudo element - how to transition content that shows on hover
提问by 3dgoo
<!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>
I have this sample code above. I'm trying to use 'transition' so that the text: '- positive!' takes 3 seconds to slide/show up. But it isn't working.. How to fix it?
我上面有这个示例代码。我正在尝试使用“过渡”，以便文本：“-正！” 滑动/显示需要 3 秒。但它不起作用..如何解决？
回答by 3dgoo
afteris not a valid value of transition.
after不是 的有效值transition。
Instead put transitionas a property of the :afterselector.
而是将其transition作为:after选择器的属性。
HTML
HTML
<div>Test</div>
CSS
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;
}
You can also have a different transition on the hover in and hover out state. This allows us to have a delay to show the pseudo-element but no delay to hide it.
您还可以对悬停状态和悬停状态进行不同的转换。这允许我们延迟显示伪元素但没有延迟隐藏它。
CSS
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;
}
Here is a list of browsers that support transitions on pseudo elements: http://css-tricks.com/transitions-and-animations-on-css-generated-content/
以下是支持伪元素转换的浏览器列表：http: //css-tricks.com/transitions-and-animations-on-css-generated-content/
