Как пользоваться last:child?

Question

[Nastyuuuushka]

Как правильно указать чтобы контент шёл после всех li, а у последнего убрать его, очистить

<ul class="main">
                    <li><a href="#">BLOCK</a></li>
                    <li><a href="#">BLOCKE</a></li>
                    <li><a href="#">BLOCK</a></li>
                    <li><a href="#">BLOCK</a></li>
                    <li><a href="#">BLOCK</a></li>
                    <li><a href="#">BLOCK</a></li>
                    <li><a href="#">BLOCK</a></li>
                    <li><a href="#">BLOCK</a></li>
                    <li><a href="#">BLOCK</a></li>
                </ul>

.main li a:after{
    position: relative;
    color: #fff;
    content: " | ";
    display: block;
}
.main li:last-child { 
    content: " ";
}

Comments

[Андрей Федоров]

position: relative тут не к месту., его нужно дать элементу а, в то время как для а:after нужно дать position:absolute, left: 100%;

Answer 1

[Андрей Федоров]

.main li:not(:last-child) a:after{
    position: relative;
    color: #fff;
    content: " | ";
    display: block;
}

Comments

[Nastyuuuushka]

:not? ни разу не слышала)

[Андрей Федоров]

Nastyuuuushka: prgssr.ru/development/polnoe-rukovodstvo-po-psevdo...