title: Combining CSS Pseudo-elements, ":after" the ":last-child"
body: <p>I want to make "grammatically correct" lists using CSS. This is what I have so far:</p>
  
  <p>The <code>&lt;li&gt;</code> tags are displayed horizontally with commas after them.</p>
  
  <p><code>li { display: inline; list-style-type: none; }</code></p>
  
  <p><code>li:after { content: ", "; }</code></p>
  
  <p>That works, but I want the "last-child" to have a period instead of a comma. And, if possible, I'd like to put "and" before the "last-child" as well. The lists I'm styling are generated dynamically, so I can't just give the "last-children" a class. You can't combine pseudo-elements, but that's basically the effect I want to achieve.</p>
  
  <p><code>li:last-child li:before { content: "and "; }</code></p>
  
  <p><code>li:last-child li:after { content: "."; }</code></p>
  
  <p>How do I make this work?</p>