0

Is there a way to select the first element after wrapping to a new line?

In this example, I'm trying to make it so that middots · appear on all list items that don't begin a line.

html render shows middots only in desirable spots

I can keep the middots from appearing on the first item in a list with the :not(:first-child) selector, but I get an unwanted middot when longer lists wrap past the first line.

html render shows middots in undesireable spots

ul {
  padding: 0;
}

ul>li {
  display: inline-block;
}

ul>li:not(:first-child)::before {
  content: '· '
}
<h4>Love</h4>
<p>We love people and places with the radical love of Jesus Christ.</p>
<ul>
  <li><a href="https://bible.com/59/1PE.4.8">1 Peter 4:8</a></li>
  <li><a href="https://bible.com/59/GAL.5.13-14">Galatians 5:13-14</a></li>
  <li><a href="https://bible.com/59/JER.29.7">Jeremiah 29:7</a></li>
  <li><a href="https://bible.com/59/MAT.20.28">Matthew 20:28</a></li>
  <li><a href="https://bible.com/59/ROM.13.8-10">Romans 13:8-10</a></li>
  <li><a href="https://bible.com/59/JHN.13.34-35">John 13:34-35</a></li>
  <li><a href="https://bible.com/59/JHN.15.12">John 15:12</a></li>
</ul>

If I could select for elements that start a line after wrapping, I could get my desired behavior. Is there a way to select for that in CSS? If not, how would you avoid beginning lines with · in pure CSS?

Merchako
  • 789
  • 1
  • 8
  • 19
  • Have you tried `ul>li:not(:last-child)::after {content: ' ·'}` ? – mrmonsieur Dec 27 '21 at 20:27
  • @mrmonsieur, yes, that's what I'm using right now, but it has the undesirable side effect of creating trailing middots at the end of lines. It certainly looks better than my example, but it's not my goal. – Merchako Dec 27 '21 at 20:54
  • A bit hackie perhaps, but you could give the list a `display: flex;` and `flex-wrap: wrap;` and the list items a `flex-grow: 1;` then all the trailing dots align on the right side of the `ul` and you can hide them with some relative positioning or cover them with another div or something. – mrmonsieur Dec 27 '21 at 21:18

0 Answers0