Dont include last child while using li:after : <p>I would like to add "|" after every li elements but not include last li. How could I do?</p>

<p><a href="https://jsfiddle.net/atahta/s9x05ks9/" rel="nofollow noreferrer">fiddle</a></p>

<p>HTML</p>

<pre><code>&lt;nav class="footer-menu"&gt;
&lt;ul&gt;
   &lt;li&gt;&lt;a href=""&gt;Blog&lt;/a&gt;&lt;/li&gt;
    &lt;li &gt;&lt;a href="#"&gt;Page B&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href=""&gt;Page A&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p></p>

<p>CSS</p>

<pre><code>.footer-menu ul li{display: inline-table;}
.footer-menu {text-align: center; background: #FFF;}
.footer-menu ul li:after {
    font-size: 13px;
    color: #999;
    width: 100%;
    content:"|";
}
</code></pre>
