Css - 将图片用于伪元素

Question

我发现This文章，但我想在:: before和:: after内容属性中使用图片，而不是字体图标。

原文：

.icon-dribbble:before, .icon-dribbble:after { 
    content: "\e007"; 
} 

最好的我想出迄今（它不工作，PIC确实出现，但如预期一样在文章中它不工作）：

.icon-dribbble:before, .icon-dribbble:after { 
    background-image: url('icon.png'); 
    background-repeat:space; 
    background-size: 40px 40px; 
    background-position:center; 
    top:0px; 
    content: ""; 
    } 

Answer 1

问题是你的伪元素，没有内容，没有什么可以自己调整大小，所以你需要手动调整它们的大小。首先，将它们的display值设置为block或inline-block，以适合您的需求为准。然后将height和width设置为您的图像的大小，我猜测它是40像素的正方形。

另外，您已经为top属性设置了一个值，但没有为position设置一个值。我已经假设并使用下面的absolute。

注意：虽然上述几点仍然适用，下面已经从提问者的许多澄清提供的原始解决方案大量编辑。

.icon{ 
 
    background:#404040; 
 
    border-radius:50%; 
 
    display:block; 
 
    overflow:hidden; 
 
    height:60px; 
 
    position:relative; 
 
    text-indent:60px; 
 
    transition:background .5s; 
 
    white-space:norwap; 
 
    width:60px; 
 
} 
 
.icon:hover{ 
 
    background:#3c9; 
 
} 
 
.icon::before,.icon::after{ 
 
    background-position:center center; 
 
    background-repeat:no-repeat; 
 
    background-size:40px 40px; 
 
    content:""; 
 
    display:block; 
 
    height:40px; 
 
    left:10px; 
 
    position:absolute; 
 
    transition:top .5s; 
 
    width:40px; 
 
} 
 
.icon::before{ 
 
    background-image:url('http://quran.ksu.edu.sa/images/resize3.png'); 
 
    top:10px; 
 
} 
 
.icon::after{ 
 
    /* You'll need a different image below */ 
 
    background-image:url('http://quran.ksu.edu.sa/images/resize3.png'); 
 
    top:70px; 
 
} 
 
.icon:hover::before{ 
 
    top:-70px; 
 
} 
 
.icon:hover::after{ 
 
    top:10px; 
 
} 
 
.icon:hover::before{ 
 
    top:-70px; 
 
}

<a class="icon" href="#">text</a>