CODEWITHSUNDEEP
csspseudo-element
Sixfoot Studio
Sixfoot Studio

Reputation: 2991

Add padding to :before pseudo-element in css

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!

Upvotes: 6

Views: 14203

Answers (3)

Alien Life Form
Alien Life Form

Reputation: 581

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

Upvotes: 4

Sixfoot Studio
Sixfoot Studio

Reputation: 2991

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

Upvotes: 2

generalhenry
generalhenry

Reputation: 17319

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

Upvotes: 9

Related Questions