Question

我找到了This文章，但我想在:: before和:: after content属性中使用图片，而不是字体图标。

原件：

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

Css - 将图片用于伪元素

1 个答案: