添加 :before 内容到元素子元素

Question

我有以下简化的：

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

'a' 是动态加载的，我无法向其添加 class。我只能在 'li' 上加一个 class。我想在 'a' 之前添加一个图标，以便它包含在可点击的 link.

中

目前我有：

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

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

.button-1 a:before

但这行不通。也不是我能想到或找到的任何其他变体。我认为我在这里非常愚蠢并且遗漏了一些明显的东西。任何建议。谢谢

Answer 1

当您在 child 上使用 :before 时，它有效（即可点击等），即 .button-1 > a:before:

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

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

（如您所见，我使用了一些其他内容来解决 non-available FontAwesome 图标）

评论后添加：

您也可以使用 :afer 而不是 before。在这种情况下，您需要更多设置，同样适用于 parent，尤其是 relative/absolute 位置配对，如下所示：

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

Add :before content to an elements child