apply :: after для всех элементов того же класса - PullRequest
Новая
       6

apply :: after для всех элементов того же класса

0 голосов
/ 08 октября 2018

Я пытаюсь отобразить строку после каждого элемента класса.Я хочу, чтобы строка отображалась для каждого элемента author, но after относится только к первому элементу.

Вот один элемент, я хочу строку, следующую после каждого элемента author, в настоящее время все ::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>

1 Ответ

0 голосов
/ 08 октября 2018

Вы пропускаете 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>
...