Как убрать этот последний разделитель в CSS?

Question

Привет, я хочу избавиться от последнего разделителя в этом меню http://prntscr.com/1dmia <- как вы можете видеть здесь по ссылке «Связаться с нами», после этого есть разделитель, я не хочу его показывать Я пробовал это </p>

#nav ul li:last:after{
content:'';
}

но не работает

вот разметка меню

HTML

<div id="nav" class="center"><!-- nav [START] -->
                <ul>
                    <li><a href="#" title="Home">Home</a></li>
                    <li><a href="#" title="Artist Gallery">Artist Gallery</a></li>
                    <li><a href="#" title="Make an Appointment">Make an Appointment</a></li>
                    <li><a href="#" title="Location">Location</a></li>
                    <li><a href="#" title="Contact Us">Contact Us</a></li>
                </ul>
</div><!-- nav [END] -->

CSS

#nav ul li{
float:left; 
margin-top:10px;
margin-right:35px;
}

#nav ul li:after{
content:'l';
color:#d40202;
margin-left:20px;
}

Answer 1

Вы хотите :last-child:

#nav ul li:last-child:after {
    content: '';
}

Но, учитывая, что этот псевдокласс предназначен только для CSS3 (в отличие от :first-child, который является CSS2), вам лучше дать последний li свой собственный идентификатор или класс, и выбрав его вместо этого, что понимают другие браузеры:

#nav ul li.last:after {
    content: '';
}

Answer 2

Вы пробовали last-child?

#nav ul li:last-child:after
{
  content: '';
}