CSS :before / :after 的背景颜色独立于父级

Question

我有一系列 CSS 规则来为 PDF 添加 FontAwesome 图标 before/after link，phone 数字，电子邮件地址等

此外，我有一个 links 的全局悬停规则，它使所有 link 元素的背景颜色为黄色。

.main a:hover {
  background-color: yellow;
}

.main a[href^="tel"]:before {
  content: '\f879';
  background-color: transparent;
}

.main a[href^"tel"]:hover::before {
  background-color: transparent;
}

<div class="main">
  <p>Phone: <a href="tel:131313">131313</a></p>
  <p><a href="/test.html">Normal link - no icon</a></p>
</div>

我的问题是我不想将黄色悬停颜色应用于图标。

如果我将伪元素上的悬停颜色设置为特定颜色（例如，不透明），一切正常。但是这些 link 可以出现在任何地方（卡片、手风琴等），它们可能具有不同的背景颜色，所以我宁愿不必定义每个可能的实例。

Answer 1

您可以为伪元素赋予 position: absolute 样式。这会将它与其父对象分开。尝试以下操作：

.main a[href^="tel"] {
  content: '\f879';
  background-color: transparent;
  margin-left: 10px;
}

.main a[href^="tel"]:before {
  content: '\f879';
  background-color: transparent;
  position: absolute;
  left: 0;
}

根据自己的喜好调整边距！

Answer 2

这是我的解决方案，使用 jQuery 用 span 包装所有具有属性 href 并以“tel”开头的锚点。我没有在此处导入 FontAwesome，因此您的图标无法正确显示，但您可以看到，即使锚点被段落文本包围，您想要的突出显示也能正常工作。

$(function() {
  $('a[href^="tel"]').html('<span>' + $('a[href^="tel"]').html() + '</span>');
});

.main a:before {
  content: '\f879A';
}
.main a span:hover {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
  <p>Hello, <a href="tel:131313">131313</a>!</p>
</div>

Answer 3

您可以使用偏移渐变，但您需要根据您的情况更新值，因为它取决于图标的大小：

.main a:hover {
  background: linear-gradient(yellow 0 0) 10px no-repeat;
}

.main a[href^="tel"]:before {
  content: '\f879';
  background-color: transparent;
}

.main a[href^"tel"]:hover::before {
  background-color: transparent;
}

<div class="main">
  <p><a href="tel:131313">131313</a></p>
</div>

CSS :before / :after 的背景颜色独立于父级

CSS Background Color for :before / :after independent of parent

css

hover

pseudo-element