Использование: not (: last-child): after псевдоэлементы для каждой строки в неупорядоченном списке - PullRequest
Новая
       7

Использование: not (: last-child): after псевдоэлементы для каждой строки в неупорядоченном списке

0 голосов
/ 07 ноября 2018

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

желаемый эффект

Я использую неупорядоченный список, подобный этому: 

 ul { padding-left: 0;
  margin-left: 0;
  display: flex;
  flex-flow: row wrap;
 }
 
 li {
  list-style: none;
 }
 
.lineup-list li:not(:last-child):after {
  content: " . "
}
<ul class="lineup-list">
  <li>Amazing Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Cool Band</li>
  <li>Nice Band</li>
  <li>Cool Band</li>
</ul>

Это работает ... но в конце каждого ряда есть период, который я не хочу. Если бы мне пришлось вручную пройти и добавить точку, это все равно не решило бы проблему, поскольку, если бы кто-то изменил размер экрана, периоды снова оказались бы в неправильном месте.

Есть ли возможность для предметов иметь периоды между ними ТОЛЬКО в том случае, если они не находятся в конце строки? Спасибо.

1 Ответ

0 голосов
/ 07 ноября 2018

Как насчет этого -> https://jsbin.com/mereqex/edit?html,css,output

CSS: 

ul {
   padding-left: 0;
   margin-left: 0;
   text-align: center;
}

li {
  display: inline;
}

.lineup-list li:not(:first-child):before {
  content:  " \B7  ";
}

.lineup-list li:nth-child(3n):before {
  content: "\A";
  white-space: pre;
}

HTML: 

<ul class="lineup-list">
  <li>Amazing Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Great Band</li>
  <li>Cool Band</li>
  <li>Nice Band</li>
  <li>Cool Band</li>
</ul>
...