Question

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

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

非常感谢您的帮助

Answer 1

根据您想要的prnscrn

您需要使用margin-left伪选择器的:before并将bottom放在0上。使用下面的CSS，应该可以正确显示结果：

这是工作中的fiddle。

CSS

li:nth-child(4)::before {
    content: url('https://image.prntscr.com/image/RsidxDk_QzytthM_zz4H8Q.png');
    position: absolute;
    margin-left: -2.7em;
    bottom: 0;
    zoom: 0.8;
}

在这种情况下，请使用zoom来减小大小，并将margin-left的单位em用于async handeSendRequest(){ await fetch('/api/sendIt', {method:'post', headers: {'Content-type' : 'application/json' }}, body: JSON.stringify(this.state)) }，这样它将采用元素的字体大小。（请注意，您提供的CSS中存在很多错误。）

正确对齐伪选择器图像

1 个答案: