0

I have a <ul> with a number of <li>'s. I have the following styles set on it:

list-style: none; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem;

Each <li> also has a pseudo :after on it with the following styles:

content: "";
    display: block;
    width: 0.5em;
    height: 0.5em;
    aspect-ratio: 1/1;
    background-color: var(--color-gothic);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -1.25em;

This gives me a small circle between every item. It's purely decorative.

I really don't think there is a solution to this but thought i'd ask incase anyone has any genius brainwaves.

What I want is for the decorative dots to appear between items but NOT to appear after an item if it's the last one on a line.

That make sense?

rctneil
  • 7,016
  • 10
  • 40
  • 83

1 Answers1

-2

Yes, there is a solution to this, you can use the following, which will apply style to all elements but the last child.

li:not(:last-child)::after {
    content: "";
    display: block;
    width: 0.5em;
    height: 0.5em;
    aspect-ratio: 1/1;
    background-color: var(--color-gothic);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -1.25em;
}
Dvalo
  • 107
  • 4
  • That doesn't appear to work? It still adds one at the end of each line of flexxed items? – rctneil Nov 12 '21 at 23:06
  • @rctneil here's a live example - https://jsfiddle.net/ngm7dxs8/ can you please provide jsfiddle of what's not working exactly? – Dvalo Nov 12 '21 at 23:11
  • Thanks for the example. If you squish the window your example is is so the flex wrap comes into effect. What I wish for is that each line does not have a dot at the right hand end of it. Not just the very last item. The last item on its own is super easy as you've shown. – rctneil Nov 12 '21 at 23:16
  • @rctneil okay, I think I see what you mean now. Is this something you are looking for? https://jsfiddle.net/p1ms5z2c/ I have moved pseudo element to display before text, therefore there won't be any dots just hanging at the end. – Dvalo Nov 12 '21 at 23:22
  • This is exactly the issue I had before I posted. Unfortunately with that, the exact opposite issue occurs. Squeeze your browser window and you get dots before each line. Don't worry about it. I'll scrap that design idea and go for something different. Appreciate your efforts though! – rctneil Nov 12 '21 at 23:25