Add a pipe separator after the items in the unordered list if this item is not the last in the line

Question

Is it possible to create this html ...

<ul> <li>Dogs</li> <li>Cats</li> <li>Lions</li> <li>Tigers</li> <li>Zebras</li> <li>Giraffes</li> <li>Bears</li> <li>Hippopotamuses</li> <li>Antelopes</li> <li>Unicorns</li> <li>Seagulls</li> </ul> 

... like this...

... without adding classes to specific list items or when using javascript? And if so, how?

Line breaks are not fixed; the list expands to take up extra space, and the list items are centered.

Answer 1

Now it's possible with flex-box

Keys to this technique:

• The container element set to overflow: hidden .
• Set justify-content: space-between to ul (which is a flexible box) to make its flexible elements stretch to the left and right edges.
• Set margin-left: -1px to ul so that its left edge overflows the container.
• Set border-left: 1px to flexible li elements.

The container acts as a mask that hides the borders of any flexible elements that touch the 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; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/> <div class="flex-list"> <ul> <li>Dogs</li> <li>Cats</li> <li>Lions</li> <li>Tigers</li> <li>Zebras</li> <li>Giraffes</li> <li>Bears</li> <li>Hippopotamuses</li> <li>Antelopes</li> <li>Unicorns</li> <li>Seagulls</li> </ul> </div> 

Answer 2

Simply

 li + li::before { content: " | "; } 

Of course, this does not actually solve the problem of OP. He wants to free the vertical stripes at the beginning and end of the lines, depending on where they are broken. I will go to the limb and say that this problem is not solvable with CSS, and not even with JS, if you do not want to substantially rewrite the logic of the text dimension / layout / routing of the browser engine.

The only CSS snippets, as I see it, “know” about line breaks, firstly, the ::first-line pseudo-element, which doesn’t help us, - in any case, it is limited to several presentation attributes and does not work together with things like: : before and :: after. The only other aspect of CSS that I can come up with is to some extent revealing line breaks - wrapping. However, wrapping means adding a character (usually a dash) to the end of lines in certain situations, while here we are concerned about deleting a character (vertical line), so I just don’t see how to apply any logic related to wrapping, even with properties such as hyphenate-character .

We have a word-spacing that applies inside the line, but not at the beginning of the line and the ends, which seems promising, but determines the width of the space between words, and not the character (s) to be used.

I wonder if there is a way to use the text-overflow property, which has a little-known ability to take two values ​​to display overflow text on the left and right, as in

 text-overflow: '' ''; 

but there seems to be no obvious way to get from A to B.

Answer 3

Before showing the code, it's worth mentioning that IE8 supports :first-child , but not :last-child , so in such situations you should use the :first-child class pseudo-class.

Demo

 #menu{ list-style: none; } #menu li{ display: inline; padding: 0 10px; border-left: solid 1px black; } #menu li:first-child{ border-left: none; } 

 <ul id="menu"> <li>Dogs</li> <li>Cats</li> <li>Lions</li> <li>More animals</li> </ul> 

Answer 4

Use the :after pseudo-selector. Take a look at http://jsfiddle.net/A52T8/1/

 <ul> <li>Dogs</li> <li>Cats</li> <li>Lions</li> <li>Tigers</li> <li>Zebras</li> <li>Giraffes</li> <li>Bears</li> <li>Hippopotamuses</li> <li>Antelopes</li> <li>Unicorns</li> <li>Seagulls</li> </ul> ul li { float: left; } ul li:after { content: "|"; padding: 0 .5em; } 

EDIT:

JQuery solution:

HTML:

 <div> <ul id="animals"> <li>Dogs</li> <li>Cats</li> <li>Lions</li> <li>Tigers</li> <li>Zebras</li> <li>Giraffes</li> <li>Bears</li> <li>Hippopotamuses</li> <li>Antelopes</li> <li>Unicorns</li> <li>Seagulls</li> <li>Monkey</li> <li>Hedgehog</li> <li>Chicken</li> <li>Rabbit</li> <li>Gorilla</li> </ul> </div> 

CSS

 div { width: 300px; } ul li { float: left; border-right: 1px solid black; padding: 0 .5em; } ul li:last-child { border: 0; } 

JQuery

 var maxWidth = 300, // Your div max-width totalWidth = 0; $('#animals li').each(function(){ var currentWidth = $(this).outerWidth(), nextWidth = $(this).next().outerWidth(); totalWidth += currentWidth; if ( (totalWidth + nextWidth) > maxWidth ) { $(this).css('border', 'none'); totalWidth = 0; } }); 

Take a look here. I also added some more animals. http://jsfiddle.net/A52T8/10/

Answer 5

One solution is to style the left border:

 li { display: inline; } li + li { border-left: 1px solid; margin-left:.5em; padding-left:.5em; } 

However, this may not give the desired results if all the lists are wrapped, as in your example. That is, it will give something like:

 foo | bar | baz | bob | bill | judy 

Answer 6

I know I'm a little late to the party, but if you can put up with line alignment, one hack to put pipes in front of the elements, and then put the mask over the left edge, basically like this:

 li::before { content: " | "; white-space: nowrap; } ul, li { display: inline; } .mask { width:4px; position: absolute; top:8px; //position as needed } 

more complete example: http://jsbin.com/hoyaduxi/1/edit

Answer 7

Today I came across a solution that seems to no longer exist and seems to work so far. The accepted answer does not work as is on IE10, but it does. http://codepen.io/vithun/pen/yDsjf/ credit to the author of course!

 .pipe-separated-list-container { overflow-x: hidden; } .pipe-separated-list-container ul { list-style-type: none; position: relative; left: -1px; padding: 0; } .pipe-separated-list-container ul li { display: inline-block; line-height: 1; padding: 0 1em; margin-bottom: 1em; border-left: 1px solid; } 

 <div class="pipe-separated-list-container"> <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> <li>Ten</li> <li>Eleven</li> <li>Twelve</li> <li>Thirteen</li> <li>Fourteen</li> <li>Fifteen</li> <li>Sixteen</li> <li>Seventeen</li> <li>Eighteen</li> <li>Nineteen</li> <li>Twenty</li> <li>Twenty One</li> <li>Twenty Two</li> <li>Twenty Three</li> <li>Twenty Four</li> <li>Twenty Five</li> <li>Twenty Six</li> <li>Twenty Seven</li> <li>Twenty Eight</li> <li>Twenty Nine</li> <li>Thirty</li> </ul> </div> 

Answer 8

Yes, you will need to use pseudo-elements and pseudo-selectors: http://jsfiddle.net/cYky9/

Answer 9

You can use the following CSS to solve.

 ul li { float: left; } ul li:before { content: "|"; padding: 0 .5em; } ul li:first-child:before { content: ""; padding: 0; } 

Should work on IE8 +.