Question

我正在尝试在类的每个元素之后显示一行。我希望该行出现在每个author元素上，但之后仅指第一个元素。

这是一项，我想要在每个元素作者之后跟随一行，当前所有::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

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

将:: after应用于同一类的所有元素

1 个答案: