时间戳

首页 > 解决方案 > 在同一类的所有元素上应用 ::after

css - 在同一类的所有元素上应用 ::after

问题描述

我试图在类的每个元素之后显示一行。我希望为每个作者元素显示该行，但之后仅引用第一个元素。

这是一个项目，我想在每个元素作者后跟一行，目前所有::after的 s 都指的是同一个元素：

.youtube-author:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 342px;
  right: 0;
  height: 0.5em;
  border-top: 1px solid black;
  z-index: -1;
  color: #1e4671;
}
<div class="youtube-video-item">
  <div class="youtube-img-next" onclick="replaceVideo('https://www.youtube.com/watch?v=JrBLYLFl_VE')"> <img height="80" width="120" src="https://i.ytimg.com/vi/JrBLYLFl_VE/hqdefault.jpg"></div>
  <div class="youtube-title" onclick="replaceVideo('https://www.youtube.com/watch?v=JrBLYLFl_VE')">Breizh Storming. Les noms de famille (1)</div>
  <div class="youtube-author">Author</div>
</div>

标签： csspseudo-element

解决方案

position: relative你在youtube-author班上不见了。您必须将它们添加到父元素（真实元素）中才能将伪元素附加到它，否则它会转到相对定位的父元素：

.youtube-author {
  position: relative;
}

.youtube-author:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 342px;
  right: 0;
  height: 0.5em;
  border-top: 1px solid black;
  z-index: -1;
  color: #1e4671;
}
<div class="youtube-video-item">
  <div class="youtube-img-next" onclick="replaceVideo('https://www.youtube.com/watch?v=JrBLYLFl_VE')"> <img height="80" width="120" src="https://i.ytimg.com/vi/JrBLYLFl_VE/hqdefault.jpg"></div>
  <div class="youtube-title" onclick="replaceVideo('https://www.youtube.com/watch?v=JrBLYLFl_VE')">Breizh Storming. Les noms de famille (1)</div>
  <div class="youtube-author">Author</div>
</div>

推荐阅读