Add a pipe separator after items in an unordered list unless that item is the last on a line

Question

Is it possible to style this html ...

    
Dogs
    
Cats
    
Lions
    
Tig         


        

Answer 1

This is now possible with flex-box

The keys to this technique:

• A container element set to overflow: hidden.
• Set justify-content: space-between on the ul (which is a flex-box) to force its flex-items to stretch to the left and right edges.
• Set margin-left: -1px on the ul to cause its left edge to overflow the container.
• Set border-left: 1px on the li flex-items.

The container acts as a mask hiding the borders of any flex-items touching its left edge.

.flex-list {
    position: relative;
    margin: 1em;
    overflow: hidden;
}
.flex-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -1px;
}
.flex-list li {
    flex-grow: 1;
    flex-basis: auto;
    margin: .25em 0;
    padding: 0 1em;
    text-align: center;
    border-left: 1px solid #ccc;
    background-color: #fff;
}

    

        
Dogs
        
Cats
        
Lions
        
Tigers
        
Zebras
        
Giraffes
        
Bears
        
Hippopotamuses
        
Antelopes
        
Unicorns
        
Seagulls