Css - Использование изображений для псевдоэлементов

Question

Я нашел This статью, но я хочу использовать изображение в :: before и :: после атрибута content, а не значки шрифта.

Оригинал:

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

Лучшее, что я придумал до сих пор (что не работает, ПИК действительно обнаруживается, но он не работает по назначению, как в статье):

.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>