Please see my site here: http://www.planetshah.com/mixes. It host my music mixes. You will notice on the home page my mixes are layed out in rows divided by the pipe (|) character. What I'm wondering is how I can insert the pipe character between each mix except to the right of the last one of each row. So I want to remove the ones circled in red below:
Image may be NSFW.
Clik here to view.
Here is my code:
HTML:
<html><head><title>Music Mixes</title><link href="./styles.css" rel="stylesheet"/><script rel="javascript" src="./globals.mixes.js"></script><script rel="javascript" src="./ajax.mixes.js"></script><script rel="javascript" src="./logic.mixes.js"></script></head><body onload="loadMixListPage()"><div class="background-container"><div class="foreground-container"><div class="foreground-inner-container"><!-- inject mixes here --></div></div></div></body></html>CSS:
.foreground-inner-container { width: 100%; height: 100%; overflow: auto; padding: 0 10px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;}javascript:
function injectMixList(list) { const foreGroundInnerContainer = document.querySelector('.foreground-inner-container'); list.forEach((l, i) => { const link = document.createElement('a'); link.setAttribute('href', 'javascript:void(0)'); link.onclick = () => mixClicked(l[0]); link.innerHTML = l[1]; foreGroundInnerContainer.appendChild(link); if (i < list.length - 1) { const divider = document.createElement('span'); divider.innerHTML = '|'; foreGroundInnerContainer.appendChild(divider); } });}You'll notice that I'm already omitting the last | in the javascript where I check the index in the foreach loop. If it's the last index, I omit the |.
What I would like to do is detect when it's the last index of the current row. In other words, when the flexbox detects that there is no more room in the current row and has to wrap to the next row, that is when I want to omit the |. But I don't know if there's a way to do that, is there? Maybe somehow with pseudo-elements in CSS?
Thanks for any forthcoming help.
