調整僞元素圖像和文本之間的間距

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