html - 如何在 HTML 链接标签中添加::after

Question

::after 元素有一个 CSS 效果。例如:

.wrapper a:hover:after, footer.main-footer a:hover:after {
   background:#ff0000;
}

在 Chrome 开发者控制台中，我注意到有一些链接标签有 ::after 里面，这将显示效果

<a href="test.com" data-term="event">Event::after</a>

有些人没有

<a class="back-to-portfolio" href="test2.com">All</a>

该元素不显示效果。问题是，如何将 ::after 添加到链接标记中，或者 ::after 将在什么条件下显示？

Answer 1

基本上，要让 :after 元素起作用或出现，整个选择器都应该匹配。在下面的代码片段中，您可以看到只有 a 元素是 .wrapper 元素的后代或 footer.main-footer 的后代element 获取 :after 元素。在 div.wrapper 和 footer.main-footer 之外的另一个 a 没有得到 :after 元素。

另一件需要注意的事情是 pseudo-elements are generated only if content property is specified .因此，在下面的代码片段中，:after 元素仅在 a 悬停时生成。

.wrapper a:hover:after,
footer.main-footer a:hover:after {
  background: #ff0000;
}
/* just for demo */

.wrapper,
footer {
  position: relative;
  height: 40px;
}
.wrapper a:hover:after,
footer.main-footer a:hover:after {
  position: absolute;
  content: ''; /* this is important */
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
}

<div class='wrapper'>
  <a href="test.com" data-term="event">Event::after</a>
</div>
<footer class='main-footer'>
  <a href="test.com" data-term="event">Event::after</a>
</footer>

<a class="back-to-portfolio" href="test2.com">All</a>

另一方面，在下面的代码片段中，即使 a 没有悬停，:after 也会出现。

.wrapper a:after,
footer.main-footer a:after {
  background: #ff0000;
}
/* just for demo */

.wrapper,
footer {
  position: relative;
  height: 40px;
}
.wrapper a:after,
footer.main-footer a:after {
  position: absolute;
  content: ''; /* this is important */
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
}

<div class='wrapper'>
  <a href="test.com" data-term="event">Event::after</a>
</div>
<footer class='main-footer'>
  <a href="test.com" data-term="event">Event::after</a>
</footer>

<a class="back-to-portfolio" href="test2.com">All</a>

---

关于为什么有些 anchor /链接标签有 :after 而其他一些没有的问题，原因应该是因为 anchor /链接标签没有 :after 元素与设置 content 属性的选择器不匹配。

(我假设 content 属性必须在您页面的某处设置，因为您提到它显示在某些元素上。)