如何在css伪元素:: after之后使用图像

Question

如何使用<li>

在每个::before前面添加下面的蓝色图像

我想要一个像这样的结构

但我只能做到这个

这是我的css代码

.footer-top {

height: 346px;
background-color: #38464f;
padding-top: 56px;
}

.footer-top-ul {

padding-left: 0px;
}

.footer-top-ul li {

color: white;
font-size: 15px;
font-family: calibri;
line-height: 29px;
    width: 174px;
}

.footer-top-ul li::before {

content: "->";
padding-right: 6px;
}

我想使用蓝色图标而不是“ - ＆gt;”

这是我的HTML代码

<ul class="footer-top-ul">
<li>About Us</li>
<li>Affiliate Programme</li>
<li>Careers</li>
<li>Gift Shop</li>
<li>Group Sales</li>
<li>Contact Us</li>
</ul>

任何形式的帮助都将受到高度赞赏。

Answer 1

您可以使用url()

.footer-top-ul li::before {    
  content: url(path-to-image);
  padding-right: 6px;
}

另一个选择是使用像这样的HTML实体，它将比图像

更高效

＆＃13;

＆＃13;

.footer-top {
  height: 346px;
  background-color: #38464f;
  padding-top: 56px;
}

.footer-top-ul {
  padding-left: 0px;
}

.footer-top-ul li {
  /*color: white;*/
  font-size: 15px;
  font-family: calibri;
  line-height: 29px;
  width: 174px;
}

.footer-top-ul li::before {
  content: '\25B6';
  color: blue;
  padding-right: 6px;
}

＆＃13;

<ul class="footer-top-ul">
  <li>About Us</li>
  <li>Affiliate Programme</li>
  <li>Careers</li>
  <li>Gift Shop</li>
  <li>Group Sales</li>
  <li>Contact Us</li>
</ul>

＆＃13;

＆＃13;

＆＃13;