html - 如何在 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;
}

我想使用那个蓝色图标而不是“->”

这是我的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 实体，像这样，它比图像的性能更高

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

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