如何为伪元素:before使用边距或填充以在图像和数字之间留出足够的空间

Look here in this link for screenshot

<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <link rel="stylesheet" href="style.css">
       <title>Document</title>
</head>
<body>
     <div class="container">
        <ul>
            <li>city</li>
            <li>email</li>
            <li>adress</li>
            <li>0202020202</li>
        </ul>
      </div>

</body>
</html>


the code is here

在此先感谢您的帮助

最佳答案

另一种解决方案是将图片显示为背景。然后,您可以轻松定位图标。

ul li:nth-child(4)::before {
    content: '';
    background: transparent url(image.png) no-repeat right top;
    background-size: contain;
    position: absolute;
    width: 25px;
    height: 30px;
    left: -30px;
    top: 0;
}


Here in your code

10-06 09:56
查看更多