html - Chrome 中伪元素的 CSS 过渡

Question

如何使 CSS 过渡在伪元素上起作用？

示例:

<div class="foo" data-foo='baz'>bar</div>
<div>hover below for the working (non-pseudo) effect</div>
<div class="tar" data-foo='arrr'>nyan</div>

样式:

.foo {
    margin: 20px;
    padding: 6px;
    background-color: #fcc;
}

.foo:after {
    margin-left: 4px;
    content: 'hoot';
    font-weight: bold;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
}

.foo:hover:after {
    opacity: 1;
}




.tar {
    margin: 20px;
    padding: 6px;
    background-color: #fcc;
}

.tar {
    margin-left: 4px;
    content: 'hoot';
    font-weight: bold;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
}

.tar:hover {
    opacity: 1;
}

fiddle :

http://jsfiddle.net/sdzUp/1/

这似乎只适用于 firefox(具有适当的前缀)

Answer 1

你可以这样试试

HTML

<div class="foo" data-foo='baz'>bar <font>hoot</font></div>
<div>hover below for the working (non-pseudo) effect</div>
<div class="tar" data-foo='arrr'>nyan</div>

CSS

.foo {
    margin: 20px;
    padding: 6px;
    background-color: #fcc;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.foo font{
    font-weight: bold;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
}
.foo:hover font{
    opacity: 1;
}
.foo:hover:after {
    opacity: 1;
}
.tar {
    margin: 20px;
    padding: 6px;
    background-color: #fcc;
}
.tar {
    margin-left: 4px;
    content: 'hoot';
    font-weight: bold;
    opacity: 0;
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    transition: opacity 1s ease;
}
.tar:hover {
    opacity: 1;
}

演示:http://jsfiddle.net/enve/sdzUp/5/