调整 :before 伪元素图像和文本之间的间距

Question

我正在尝试调整位于文本之前的图像。但问题是由于字母样式 A.

，图像宽度向右移动了一些 space

我创建了一个演示：

h1:before{
    content: url('http://s9.postimg.org/bg93v6bjf/image.png');
}

<h1>pple</h1>

我怎样才能减少 A 和 p 之间的 space，以便即使我调整浏览器的大小它也停留在同一个地方？

非常欢迎任何帮助。提前致谢。

Answer 1

解决此问题的一种简洁方法是将伪元素的显示设置为 inline-block，并为其指定宽度。

这是一个现场演示：

h1:before{
    display: inline-block;
    content: url('http://s9.postimg.org/bg93v6bjf/image.png');
    width: 90px;
}

<h1>pple</h1>

Answer 2

您可以使用负值 margin 来 take away space。

h1:before{
    content: url('http://s9.postimg.org/bg93v6bjf/image.png');
}

h1 span {
    margin-left: -20px;
}

<h1><span>pple</span></h1>

Answer 3

我会将您的徽标包装在 div:

<div><h1>pple</h1></div>

然后给 div 一个固定的宽度，这样它就不会自行调整大小：

div {
    width: 180px;
}

Answer 4

这可能不是最漂亮的解决方案，但您可以在图像的右侧添加一个负边距，使文本更接近，

h1:before {
    content: url('http://s9.postimg.org/bg93v6bjf/image.png');
    margin:0 -20px 0 0;
    padding:0;
}

Adjusting spacing between :before pseudoelement image and text