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元素的后代才会获得:after元素。位于a和div.wrapper之外的其他footer.main-footer未获得:after元素。

需要注意的另一件事是data mapper pattern。因此，在下面的代码段中，:after元素仅在a悬停时生成。

＆＃13;

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

＆＃13;

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

＆＃13;

另一方面，在以下代码段中，:after即使在a没有悬停时也存在。

＆＃13;

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

＆＃13;

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

＆＃13;

关于为什么某些锚点/链接标记有:after而另一些其他人没有问题的问题，原因应该是因为锚点/链接标记没有{ {1}}元素与设置:after属性的选择器不匹配。

（我认为必须将内容属性设置在页面的某个位置，因为您提到它正在显示某些元素。）

Answer 2

像这样添加content属性：

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

如何在HTML链接标记中添加:: after

2 个答案: