CSS: Simplest way to alternate text elements into two differently-justified columns with bullets in between?

Question

Okay, that's kind of a mouthful, but what I'm trying to do is to create the "Vitamins and Minerals" section of the standard US FDA Nutrition Facts box

I'm building the page with PHP, so I can certainly do this programmatically, but is there an elegant CSS method to display text elements so that every other element is floated right, right justified? And can the bullets that divide the two columns be placed automatically?

I'd love to have something like this:

<ul id="vitaminssection">
  <li>Vitamin A 4%</li>
  <li>Vitamin C 2%</li>
  <li>Calcium 15%</li>
  <li>Iron 4%</li>
</ul>

...and have it formatted as shown in the image. Is this doable?

Answer 1

Got it figured out! :nth-field was the key, specifically the ability to use :nth-field(odd) and :nth-field(even). I used a pseudo-element on the odd ones to put the bullet in between (and used 51%/49% on the widths to more or less center it). This works on the HTML I included in the question:

#vitaminssection {
  width: 350px;
  background-color: #FFF;
  list-style: none;
  padding: 0px;
}

#vitaminssection li {
  border-top: 1pt solid #000;
}

#vitaminssection li:nth-child(odd) {
  width: 51%;
  float: left;
}

#vitaminssection li:nth-child(odd):after {
  content:'\2022';
  text-align: right;
  float: right;
}

#vitaminssection li:nth-child(even) {
  text-align: right;
  float: right;
  width: 49%;
}

Here's a jsfiddle.