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

小提琴：

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/