如何在每个 <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>
我们将不胜感激任何形式的帮助。
最佳答案
您可以使用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>
关于html - 如何在 css 伪元素中使用图像::after,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44821816/