Anyone know how to add padding between the :before pseudo-element and where the content actually starts?
<ul>
<li><strong>Name Surname</strong></li>
<li>+27.082.555.4155</li>
</ul>
I want only the first li to have a bullet point in it and only if it has a strong element in it.
I have gotten it right using:
.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;
}
Thanks all!
you can put padding in the before to make space between it and the element
.fr_contactInformation ul li strong:before
{
content:url(/App_Themes/2011/images/hm_listImage.gif);
padding-left:50px;
}
If you want to control it by pixel, and assuming you only want the bullet on the FIRST li, here's what you're looking for:
.fr_contactInformation ul li.first strong:before
{
content:url(/App_Themes/2011/images/hm_listImage.gif);
padding-right: 20px;
}
Thanks General Henry but that adds padding to the entire element.
I tried this and it worked:
.fr_contactInformation ul li strong:before
{
content: url(/App_Themes/2011/images/hm_listImage.gif) " ";
}
By adding a some space in the inverted comments at the back of the img url, it created that gap I was looking for between the image element and the content.
Then I used a negative margin on the li to bring it back into place.
Thanks ;)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With