Agregue relleno a: antes del pseudo-elemento en css

Question

¿Alguien sabe cómo agregar relleno entre el pseudo-elemento anterior y dónde comienza realmente el contenido?

<ul> 
    <li><strong>Name Surname</strong></li> 
    <li>+27.082.555.4155</li> 
</ul> 

Solo quiero el primer li que tenga un punto y solo si tiene un elemento fuerte.

He conseguido usando derecha:

.fr_contactInformation ul li strong:before 
{ 
    content:url(/App_Themes/2011/images/hm_listImage.gif); 
} 

.fr_contactInformation ul li strong 
{ 
    /*Here is where I am going wrong*/ 
    padding-left: 50px; 
} 

Gracias a todos!

Answer 1

se puede poner el relleno en el espacio antes de hacer entre éste y el elemento

.fr_contactInformation ul li strong:before 
    { 
     content:url(/App_Themes/2011/images/hm_listImage.gif); 
     padding-left:50px; 
    } 

Answer 2

Gracias general Henry, sino que añade el relleno a todo el elemento.

yo probamos este y funcionó:

 .fr_contactInformation ul li strong:before 
     { 
     content: url(/App_Themes/2011/images/hm_listImage.gif) " "; 

     } 

Mediante la adición de un poco de espacio en los comentarios invertidas en la parte posterior de la url img, creó ese hueco que estaba buscando entre el elemento de imagen y el contenido .

Luego utilicé un margen negativo en el li para devolverlo a su lugar.

Gracias;)

Answer 3

Si desea controlarlo por píxel, y suponiendo que sólo se desea la bala en la LI primero, esto es lo que está buscando:

.fr_contactInformation ul li.first strong:before 
{ 
    content:url(/App_Themes/2011/images/hm_listImage.gif); 
    padding-right: 20px; 
}