Dots between a long list of elements

Question

Ideally I'd like to solve this problem with pure CSS, but I'd imagine this likely needs JS to be solved

I have a long unordered list, with bullets between them, which looks like this:

I have styled it like this:

.names li:not(:last-child):after {
    font-weight: lighter;
    content: "\25CF";
    color: #C70039;
}

.names ul li { display: inline; white-space: pre; }
.names ul li:last-child:after { content: ""; }

.names {
    margin-right: 15%;
    margin-left: 15%;
    padding: 0;
    text-align: justify;
    display: inline-block;
}

.names li {
    display: inline;
}

How can I stop the bullets appearing at the edge like that? Keeping in mind it needs to be responsive

add your html code to make it easy for us and we don't have to write manually a random code to test — Temani Afif, Jun 07 '20 at 22:41
the list is taken from a csv which is served via a backend API call and then it's just a set of UL and LIs @TemaniAfif — azr481, Jun 07 '20 at 22:44
if it's a *just* ul/li then you can easily do a copy/paste inside the question to have a full code. We don't need the image but we need the code that we can run — Temani Afif, Jun 07 '20 at 22:44

score 1 · Answer 1 · answered Jun 07 '20 at 22:46

Remove the padding from the <ul>, and set the overflow to hidden. Use ::before on all list items to display the red dot, and also set a fixed width of 1em to the ::before. Now use position: relative and left: -1em on the <li> items to hide the red dot on the left side.

.names li::before {
  display: inline-block;
  width: 1em;
  font-weight: lighter;
  content: "\25CF";
  color: #C70039;
}

.names ul {
  padding: 0;
  overflow: hidden;
}

.names ul li {
  position: relative;
  left: -1em;
  display: inline;
  white-space: pre;
}

.names {
  margin-right: 15%;
  margin-left: 15%;
  padding: 0;
  text-align: justify;
  display: inline-block;
}

<div class="names">
  <ul>
    <li>Calvin Manning</li>
    <li>Zachariah Little</li>
    <li>Stephanie Lowery</li>
    <li>Tori Lynn</li>
    <li>Lucas Hogan</li>
    <li>Tristian Thornton</li>
    <li>Madison Preston</li>
    <li>Azul Robertson</li>
    <li>Ulises Pruitt</li>
    <li>Jayleen Roth</li>
    <li>Aylin Burgess</li>
    <li>Lukas Roman</li>
    <li>Aden Crawford</li>
    <li>Alexzander Fitzgerald</li>
    <li>Gustavo Dyer</li>
    <li>Allyson Gates</li>
    <li>Tia Munoz</li>
    <li>Ignacio Mcconnell</li>
    <li>Blaze Shelton</li>
    <li>Quentin Hebert</li>
    <li>Kirsten Bowen</li>
    <li>Ryan Nelson</li>
    <li>Giovanny Rowland</li>
    <li>Audrey Costa</li>
  </ul>
</div>

Dots between a long list of elements

1 Answers1