Use middle dots to separate a list of items; JQuery javascript on load and resize updates CSS to hide dots at the end of lines

I was trying to solve this problem with just CSS, but I'm pretty convinced it isn't possible. That's too bad, since it means I cannot use it in email messages. But it will work in web pages.

The solution is based on Jon’s great answer on this StackOverflow question. I added Randall’s mod to hide the dots rather than removing them to prevent re-layout bugs. And I added a similar string at the beginning of each line to make sure the lines were visually centered (this part can be removed—or at least the content can be set to null—if you want to left align). And finally, I switched to checking the left offset rather than the top offset to deal with it not working in Firefox.

Test it out: a middle-dot-separated list of links