在CSS中为:before伪元素添加填充。

Question

有人知道如何在:before伪元素和实际内容之间添加填充吗？

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

我希望只有第一个li元素中含有strong标签时才显示项目符号。

我已经使用以下代码实现：

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

感谢大家！

- Sixfoot Studio

Answer 1

您可以在before中设置padding来在它与元素之间留出空白。

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

- generalhenry

Answer 2

如果您想以像素为单位控制它，并且假设您只想要第一个li上的项目符号，那么以下是您要寻找的内容：

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

- Alien Life Form

Answer 3

感谢 Henry 将内边距应用到整个元素上。

我尝试了这个方法，它有效：

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

        }

通过在img url反引号后面添加一些空格，它创建了我想要的图像元素和内容之间的间隙。

然后我使用负边距将li移回原位。

谢谢 ;)

- Sixfoot Studio