html - css - 悬停过渡 :after

Question

我有这个 CSS 代码:

.li2 {
    text-transform: uppercase;
    display:inline;
    position:relative;
    font-family: "Trebuchet MS", Arial;
    color: white;
    font-size: 15px;
    margin-left: 70px;
}
.li2:hover {
    position: relative;
}
.li2:hover:after {
    content: url("images/small_show.png"); 
    display: block;
    background-size: 19px 19px;
    width: 19;
    height:19;
    position: absolute;
    left: 34px;     
    top: -30px; 
    transition:0.5s;    

}

...我想要在文本下显示图像的一些过渡，但我的代码不起作用。我有什么不好？ 感谢您的每一个回答。

Answer 1

我不确切知道您在寻找什么过渡，但这是一个开始。您需要在 :hover 之前定义 ::after 的属性。像这样:

.li2 {
    text-transform: uppercase;
    display:inline;
    position:relative;
    font-family: "Trebuchet MS", Arial;
    color: red;
    font-size: 15px;
    margin-left: 70px;
}
.li2:hover {
    position: relative;
}
.li2::after {
    content: url("http://placebabies.com/200/300"); 
    display: block;
    background-size: 19px 19px;
    width: 19;
    height:19;
    position: absolute;
    left: 34px;     
    top: -30px; 
    opacity: 0;
    transition:0.5s;    
}
.li2:hover::after {
    opacity: 1;
}

<ul>
    <li class="li2">List Item</li>
</ul>