Регулировка расстояния между: перед изображением псевдоэлемента и текстом

Question

Я пытаюсь настроить изображение, которое сидит прямо перед текстом. Но проблема в том, что ширина изображения занимает некоторое пространство справа из алфавита в стиле А.

Я создал демо:

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

Вы можете использовать отрицательные значения margintake 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; 
}