将 :before 内容添加到元素子项答案

【问题标题】：Add :before content to an elements child将 :before 内容添加到元素子项
【发布时间】：2021-01-26 22:12:20
【问题描述】：

我有以下，简化：

<ul class="menu">
  <li class="button-1">
    <a href="somewhere">Link</a>
  </li>
</ul>

“a”是动态加载的，我无法向其添加类。我只能向“li”添加一个类。我想在“a”之前添加一个图标，以便将其作为可点击链接的一部分。

目前我有：

.button-1:before {
    font-family: "FontAwesome";
    content: "\f007";
    padding-left: 14px;
}

将图标完美地设置在文本链接上方。但它不可点击。因此，我尝试了...

.button-1 a:before

但这不起作用。也没有我能想到或找到的任何其他变化。我认为我在这里非常愚蠢，并且遗漏了一些明显的东西。任何建议。谢谢

【问题讨论】：

【解决方案1】：

当您在孩子上使用:before（即.button-1 > a:before）时，它可以工作（即可点击等）：

.button-1 > a:before {
    content: "© ";
    
}

<ul class="menu">
  <li class="button-1">
    <a href="somewhere">Link</a>
  </li>
</ul>

（如您所见，我使用了一些其他内容来解决不可用的 FontAwesome 图标）

评论后的补充：

您也可以使用:afer 代替before。在这种情况下，您需要更多设置，包括父级，尤其是相对/绝对位置配对，如下所示：

.button-1 {
  position: relative;
  padding-left: 20px;
}

.button-1>a:after {
  content: "©";
  position: absolute;
  left: 0px;
}

<ul class="menu">
  <li class="button-1">
    <a href="somewhere">Link</a>
  </li>
</ul>

【讨论】：

它似乎可以在选择器中不需要父级的情况下工作，但如果它是一个很棒的图标，它没有下划线但它是可点击的。
我不明白你的意思（？）
谢谢约翰内斯。我已经尝试过了，但它不起作用。我不明白为什么。使用 Chrome 87.0.4280.141
好吧，试试吧：为left 使用不同的设置（也可以是百分比值），为@添加一个负 top 设置和一个padding-top 987654332@ 并调整这些值，直到找到满意的解决方案。
谢谢约翰内斯。你帮了大忙。感谢您的时间。