CSS3 :after Overriding :last-child

Question

I have the following CSS to style a simple list:

ul.menu_list li {
display: inline;
}
ul.menu_list li:after {
content:" | ";
}
ul.menu_list li:last-child  {
content:"";
}

<ul class="menu_list">
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
  <li><a href="">Link</a></li>
</ul>

I get the desired effect except for the last-child is not losing it's vertical bar, " | ".

Link | Link | Link |

I've tried combining :after:last-child & vice-versa but the first :after declaration always takes precedence.

Answer 1

Do:

ul.menu_list li:after {
    content:" | ";
}
ul.menu_list li:last-child:after  {
    content:"";
}