如何在 HTML link 标签中添加 ::after

Question

::after 元素有 CSS 效果。例如：

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

并且在 Chrome 开发人员控制台中，我注意到有一些 link 标签里面有 ::after，这将显示效果

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

虽然有些人没有

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

该元素未显示效果。问题是，如何将::after添加到link标签或::after在什么条件下显示？

Answer 1

像这样添加content属性：

.wrapper a:hover:after, footer.main-footer a:hover:after {
   width: 30px;
   height: 30px;
   background:#ff0000;
   content: "";
   display: inline-block;
}

Answer 2

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

还有一点需要注意的是pseudo-elements are generated only if content property is specified。因此，在下面的代码片段中，仅当悬停 a 时才会生成 :after 元素。

.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/link 标签有 :after 而其他一些标签没有的问题，原因应该是因为 anchor/link 标签没有:after 元素与设置 content 属性.

的选择器不匹配

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

如何在 HTML link 标签中添加 ::after

How to add ::after in the HTML link tag

html

css

pseudo-element