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>