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

Question

我想调整坐在文本之前的图像。但问题是，图像的宽度需要一些空间，以正确的，因为字母样式A.

我已经创建了一个演示：

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

<h1>pple</h1>

的jsfiddle：http://jsfiddle.net/squidraj/wott37vy/

如何缩小A和P之间的空间，以便即使调整浏览器的大小，它仍保持在同一地点？

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

Answer 1

解决这个问题的一个简单方法是将伪元素的显示设置为inline-block，并给它定义一个宽度。

这里是一个现场演示：

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

<h1>pple</h1>

的jsfiddle版本：http://jsfiddle.net/wott37vy/3/

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; 
}