hide line beginning and end text separators

Question

two solutions below: one with pure css, the second with jQuery, allowing any kind of symbol/image to be a separator

pre: Fairly hard to formulate an

Answer 1

Here's an idea: http://jsfiddle.net/WyeSz/
^{(note that the jsfiddle demo uses a CSS reset, you may need a little more CSS than this to reset list styles, etc.)}

Basically, you set border-left on the list items, then position the entire list -1px to the left within a container that has overflow:hidden, which cuts off the left borders.

    

        
C++
        
PHP
        
CSS
        
ASP
        
JavaScript
        
jQuery
        
HTML 5
        
StackOverflow
    

ul {
    width:200px;  
    margin-left:-1px;/* hide the left borders */
}
li {
    float:left;   
    padding:2px 10px;
    border-left:1px solid #000;
}
div {
   overflow:hidden;/* hide the left borders */  
}