::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
将在什么条件下显示?
最佳答案
基本上,要让 :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 属性必须在您页面的某处设置,因为您提到它显示在某些元素上。)
关于html - 如何在 HTML 链接标签中添加::after,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37562057/