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/