添加填充到:css中的伪元素之前

时间:2011-02-24 08:35:32

标签: css pseudo-element

任何人都知道如何在:before伪元素和内容实际开始的位置之间添加填充?

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

我只希望第一个li中有一个项目符号,并且只有在其中有一个强大的元素。

我使用了:

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

全部谢谢!

3 个答案:

答案 0 :(得分:9)

你可以在之前填充填充以在它和元素之间留出空间

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

答案 1 :(得分:4)

如果你想逐个像素地控制它,并假设你只想要FIRST li上的子弹,那么这就是你要找的东西:

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

答案 2 :(得分:2)

感谢亨利将军,但是为整个元素添加了填充。

我试过这个并且有效:

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

        }

通过在img url背面的反向注释中添加一些空格,它创建了我在图像元素和内容之间寻找的差距。

然后我在li上使用了一个负余量将其重新放回原位。

谢谢;)