在同一 class 的所有元素上应用 ::after

Question

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

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

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

Answer 1

您的 youtube-author class 中缺少 position: relative。您必须将它们添加到父元素（真实元素）中以将伪元素附加到它，否则它会转到相对定位的父元素：

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

在同一 class 的所有元素上应用 ::after

apply ::after on all element of the same class

css

pseudo-element