如何在 HTML 链接标签中添加 ::after答案

【问题标题】：How to add ::after in the HTML link tag如何在 HTML 链接标签中添加 ::after
【发布时间】：2016-06-01 07:25:12
【问题描述】：

::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会在什么条件下显示？

【问题讨论】：

标签： html css pseudo-element

【解决方案1】：

为了使:after 元素正常工作或出现，应该匹配整个选择器。在下面的 sn-p 中，您可以看到只有 a 元素是 .wrapper 元素的后代或 footer.main-footer 元素的后代如何获得 :after 元素。在div.wrapper 和footer.main-footer 之外的另一个a 没有得到:after 元素。

另外需要注意的是pseudo-elements are generated only if content property is specified。因此，在下面的 sn-p 中，: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>

另一方面，在下面的 sn-p 中，即使 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>

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

（我假设 content 属性必须设置在您页面的某个位置，因为您提到它会针对某些元素显示。）

【讨论】：

太棒了。非常详细，这意味着我需要为那些没有 ::after 的链接组成一个类并为该类设置 content: ''？
是的，或者给他们的父母上wrapper类:)

【解决方案2】：

像这样添加content属性：

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

【讨论】：