正确对齐伪选择器图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了正确对齐伪选择器图像相关的知识，希望对你有一定的参考价值。
如何为伪元素: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>
非常感谢您的帮助
答案
另一种解决方案是将pic显示为背景。然后，您可以轻松定位您的图标。
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;
另一答案
根据您所需的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的大小和使用，所以它将采用元素的字体大小。 （还要注意，您提供的CSS中存在很多错误）。
以上是关于正确对齐伪选择器图像的主要内容，如果未能解决你的问题，请参考以下文章