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

发布于 2024-10-19 03:38:23 字数 513 浏览 6 评论 0原文

有人知道如何在 :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;
}

谢谢大家！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

呆萌少年 2024-10-26 03:38:23

您可以在前面添加填充，以在它和元素之间留出空间

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

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

回复收藏 0 原文

匿名的好友 2024-10-26 03:38:23

如果您想按像素控制它，并假设您只想将子弹放在第一个李上，那么这就是您要寻找的内容：

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

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

回复收藏 0 原文

短叹 2024-10-26 03:38:23

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

我尝试了这个，它起作用了：

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

        }

通过在 img url 后面的倒置注释中添加一些空格，它在图像元素和内容之间创建了我正在寻找的间隙。

然后我在 li 上使用负边距将其恢复原位。

谢谢 ;）

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

回复收藏 0 原文

~没有更多了~