使用css轉換內容

Question

我想更改div的內容，並且不希望它立即生效。我希望文字在盤旋時緩慢進入。

注：想要一個純CSS解決方案

HTML

<div></div> 

CSS

div:after { 
    content:"positive!"; 
    transition:content 2s; 
} 
div:hover:after { 
    content:"negative!"; 
} 

這裏是fiddle

Answer 1

您可以:before和玩，如：

div:before { 
    position: absolute; 
    left: 0; 
    content:"positive!"; 
    opacity: 1; 
    transition:2s; 
} 
div:after { 
    position: absolute; 
    left: 0; 
    content:"negative!"; 
    opacity: 0; 
    transition:2s; 
} 
div:hover:before { 
    opacity: 0; 
} 
div:hover:after { 
    opacity: 1; 
} 

DEMO