Wie entferne ich diesen letzten Teiler in CSS?

Question

Hallo Ich möchte den letzten Teiler in diesem Menü http://prntscr.com/1dmia < loswerden - wie Sie hier auf der 'Kontakt' Link sehen können, danach ist es Teiler, ich möchte es nicht zeigen. Ive versucht, diese

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

aber nicht funktioniert

hier ist das Markup des Menüs

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] --> 

Die 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

Sie :last-child will:

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

Aber wenn man bedenkt, dass die Pseudoklasse CSS3-only ist (im Gegensatz zu :first-child der CSS2 ist), sind Sie besser dran die letzten li seine eigenen ID oder Klasse zu geben, und die Auswahl, dass anstelle , die mehr Browser verstehen:

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

Answer 2

Haben Sie versucht last-child?