5

I'm trying to create a list of artists to perform at an event. I want it to look like this:

desired-effect

I'm using an unordered list like this:

 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>

This works... but at the end of each row there's a period that I don't want. If I were to manually go through and add a period it still wouldn't solve the problem since if someone resizes their screen the periods would be in the wrong place again.

Is there a way for items to have periods between them ONLY when they are not at the end of a ROW? Thanks.

Tom Parke
  • 119
  • 5
  • Hello, short answer, not one I know. Few workarounds: It's possible if your text is not centered align. it's possible if you define a number of items per row. – Amaury Hanser Nov 07 '18 at 09:22
  • @AmauryHanser Hi Amaury, how would it be possible if I define a number of items per row? Could you elaborate? – Tom Parke Nov 07 '18 at 10:29
  • Well if you specified the number of items per row upfront, you could use `:nth-child` or similar … – misorude Nov 07 '18 at 10:37
  • As @Amaury said, if the text was left or right aligned, the excess bullets at one side could be hidden using negative margins and cut-off overflow, therefor emulating the effect. But there is no way to target the first and last items in a row in a wrapping flexbox container, which is what you would need here; https://stackoverflow.com/questions/38962661/is-it-possible-to-target-the-first-and-the-last-element-per-row-in-a-flex-layout – misorude Nov 07 '18 at 10:45

1 Answers1

2

What about something like this --> 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>
DanieleAlessandra
  • 1,380
  • 1
  • 12
  • 21
  • This is great! I have a question about the 4th line of code. What exactly is the color element doing there? – Tom Parke Nov 07 '18 at 11:55
  • Sorry, the color is completely out of context, I forgot it from a previous experiment. I update the answer and the fiddle. – DanieleAlessandra Nov 07 '18 at 14:37
  • 1
    A great article if you want to go further in your use of `nth-child`: https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/ – Amaury Hanser Nov 07 '18 at 14:47