CSS3: после переопределения: last-child

Question

У меня есть следующий CSS для стилизации простого списка:

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>

Я получаю желаемый эффект за исключением того, что последний ребенок не теряет свою вертикальную черту, "|".

Link | Link | Link |

Я пытался объединить: after: last-child и наоборот, но первый: after объявление всегда имеет приоритет.

Answer 1

Do:

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

Answer 2

Попробуйте вместо этого:

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

Answer 3

Я обнаружил, что li + li: before работает в IE8, Chrome, FireFox и Safari для Windows

Answer 4

ul.menu_list li:last-child:after должен сделать трюк.

Вот скрипка , которая показывает его в действии.