title: CSS: Last element on line
body: <p>I've got an unordered [inline] list of links that wraps across two lines:<br>
  <img src="https://i.stack.imgur.com/NjmtI.png" alt="links widget"></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="http://google.com"&gt;Harvard Medical School&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://google.com"&gt;Harvard College&lt;/a&gt;&lt;/li&gt;
      ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>I add the dot separator via a CSS pseudo-element:</p>
  
  <pre><code>#widget-links li { display: inline; }
  #widget-links li:after { content: " \00b7"; }
  </code></pre>
  
  <p>Unfortunately, the separator appears after the last element on each line. With just one line, I'd simply grab <code>:last-child</code> and remove the psuedo-element.</p>
  
  <p>Any nifty tricks to hide that last dot with more than one line? I'm open to weird CSS, or JavaScript if absolutely necessary.</p>