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       lt ul gt       lt li gt Dogs lt  li gt       lt li gt Cats lt  li gt       lt li gt Lions lt  li gt       lt li gt Tigers lt  li gt       lt li gt Zebras lt  li gt       lt li gt Giraffes lt  li gt       lt li gt Bears lt  li gt       lt li gt Hippopotamuses lt  li gt       lt li gt Antelopes lt  li gt       lt li gt Unicorns lt  li gt       lt li gt Seagulls lt  li gt   lt  ul gt        like this            without adding classes to specific list items  or resorting to javascript  And if so how   The line breaks are not fixed  the list widens to take up additional space  and list items are center aligned

User · Answer

Slightly modified SCSS version which gives you control of the pipe   size and will eliminate padding from first and last list items while respects borders    pipe-list-height  20px   pipe-list-padding  15px    pipe-list       position  relative      overflow  hidden      height   pipe-list-height        gt  ul           display  flex          flex-direction  row            gt  li               position  relative              padding  0  pipe-list-padding                amp  after                   content   quot   quot                   position  absolute                  border-right  1px solid gray                  top  10                   right  0                  height  75                   margin-top  auto                  margin-bottom  auto                              amp  first-child                   padding-left  0                              amp  last-child                   padding-right  0                    amp  after                       border-right  none                                                      lt div class  quot pipe-list quot  gt     lt ul gt       lt li gt Link lt  li gt       lt li gt Link lt  li gt       lt li gt Link lt  li gt     lt  ul gt   lt  div gt

User · Answer

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  as well

User · Answer

Just  li   li  before       content             Of course  this does not actually solve the OP s problem  He wants to elide the vertical bars at the beginning and end of lines depending on where they are broken  I will go out on a limb and assert that this problem is not solvable using CSS  and not even with JS unless one wants to essentially rewrite the browser engine s text-measurement layout line breaking logic   The only pieces of CSS  as far as I can see  that  know  about line breaking are  first  the   first-line pseudo element  which does not help us here--in any case  it is limited to a few presentational attributes  and does not work together with things like   before and   after  The only other aspect of CSS I can think of that to some extent exposes line-breaking is hyphenation  However  hyphenating is all about adding a character  usually a dash  to the end of lines in certain situations  whereas here we are concerned about removing a character  the vertical line   so I just can t see how to apply any kind of hyphenation-related logic  even with the help of properties such as hyphenate-character    We have the word-spacing property  which is applied intra-line but not at line beginnings and endings  which seems promising  but it defines the width of the space between words  not the character s  to be used    One wonders if there s some way to use the text-overflow property  which has the little-known ability to take two values for display of overflow text at both left and right  as in   text-overflow           but there still doesn t seem to be any obvious way to get from A to B here

User · Answer

This is 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   x000D   x000D   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    x000D   lt link href  https   cdnjs cloudflare com ajax libs meyer-reset 2 0 reset min css  rel  stylesheet   gt   lt div class  flex-list  gt       lt ul gt           lt li gt Dogs lt  li gt           lt li gt Cats lt  li gt           lt li gt Lions lt  li gt           lt li gt Tigers lt  li gt           lt li gt Zebras lt  li gt           lt li gt Giraffes lt  li gt           lt li gt Bears lt  li gt           lt li gt Hippopotamuses lt  li gt           lt li gt Antelopes lt  li gt           lt li gt Unicorns lt  li gt           lt li gt Seagulls lt  li gt       lt  ul gt   lt  div gt  x000D   x000D   x000D

User · Answer

I came across a solution today that does not appear to be here already and which seems to work quite well so far  The accepted answer does not work as-is on IE10 but this one does  http   codepen io vithun pen yDsjf  credit to the author of course     x000D   x000D   pipe-separated-list-container   x000D    overflow-x  hidden  x000D    x000D   pipe-separated-list-container ul   x000D    list-style-type  none  x000D    position  relative  x000D    left  -1px  x000D    padding  0  x000D    x000D   pipe-separated-list-container ul li   x000D    display  inline-block  x000D    line-height  1  x000D    padding  0 1em  x000D    margin-bottom  1em  x000D    border-left  1px solid  x000D    x000D   lt div class  pipe-separated-list-container  gt  x000D     lt ul gt  x000D       lt li gt One lt  li gt  x000D       lt li gt Two lt  li gt  x000D       lt li gt Three lt  li gt  x000D       lt li gt Four lt  li gt  x000D       lt li gt Five lt  li gt  x000D       lt li gt Six lt  li gt  x000D       lt li gt Seven lt  li gt  x000D       lt li gt Eight lt  li gt  x000D       lt li gt Nine lt  li gt  x000D       lt li gt Ten lt  li gt  x000D       lt li gt Eleven lt  li gt  x000D       lt li gt Twelve lt  li gt  x000D       lt li gt Thirteen lt  li gt  x000D       lt li gt Fourteen lt  li gt  x000D       lt li gt Fifteen lt  li gt  x000D       lt li gt Sixteen lt  li gt  x000D       lt li gt Seventeen lt  li gt  x000D       lt li gt Eighteen lt  li gt  x000D       lt li gt Nineteen lt  li gt  x000D       lt li gt Twenty lt  li gt  x000D       lt li gt Twenty One lt  li gt  x000D       lt li gt Twenty Two lt  li gt  x000D       lt li gt Twenty Three lt  li gt  x000D       lt li gt Twenty Four lt  li gt  x000D       lt li gt Twenty Five lt  li gt  x000D       lt li gt Twenty Six lt  li gt  x000D       lt li gt Twenty Seven lt  li gt  x000D       lt li gt Twenty Eight lt  li gt  x000D       lt li gt Twenty Nine lt  li gt  x000D       lt li gt Thirty lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Use  after pseudo selector  Look http   jsfiddle net A52T8 1    lt ul gt       lt li gt Dogs lt  li gt       lt li gt Cats lt  li gt       lt li gt Lions lt  li gt       lt li gt Tigers lt  li gt       lt li gt Zebras lt  li gt       lt li gt Giraffes lt  li gt       lt li gt Bears lt  li gt       lt li gt Hippopotamuses lt  li gt       lt li gt Antelopes lt  li gt       lt li gt Unicorns lt  li gt       lt li gt Seagulls lt  li gt   lt  ul gt   ul li   float  left    ul li after   content       padding  0  5em      EDIT   jQuery solution   html    lt div gt       lt ul id  animals  gt           lt li gt Dogs lt  li gt           lt li gt Cats lt  li gt           lt li gt Lions lt  li gt           lt li gt Tigers lt  li gt           lt li gt Zebras lt  li gt           lt li gt Giraffes lt  li gt           lt li gt Bears lt  li gt           lt li gt Hippopotamuses lt  li gt           lt li gt Antelopes lt  li gt           lt li gt Unicorns lt  li gt           lt li gt Seagulls lt  li gt           lt li gt Monkey lt  li gt           lt li gt Hedgehog lt  li gt           lt li gt Chicken lt  li gt           lt li gt Rabbit lt  li gt           lt li gt Gorilla lt  li gt       lt  ul gt   lt  div gt    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   gt  maxWidth               this  css  border    none            totalWidth   0              Take a look here  I also added a few more animals  http   jsfiddle net A52T8 10

User · Answer

I know I m a bit late to the party  but if you can put up with having the lines left-justified  one hack is to put the pipes before the items and then put a mask over the left edge  basically like so   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

User · Answer

Before showing the code  it s worth mentioning that IE8 supports  first-child but not  last-child  so in similar situations  you should use the  first-child pseudo-class  Demo  x000D   x000D   menu     list-style  none      menu li     display  inline    padding  0 10px    border-left  solid 1px black      menu li first-child     border-left  none    x000D   lt ul id  menu  gt     lt li gt Dogs lt  li gt     lt li gt Cats lt  li gt     lt li gt Lions lt  li gt     lt li gt More animals lt  li gt   lt  ul gt  x000D   x000D   x000D

User · Answer

One solution is to style the left border like so   li   display  inline    li   li     border-left  1px solid    margin-left  5em    padding-left  5em      However  this may not give you desirable results if the entire lists wraps  like it does in your example  I e  it would give something like   foo   bar   baz    bob   bill    judy

User · Answer

Yes  you ll need to use pseudo elements AND pseudo selectors  http   jsfiddle net cYky9

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

Examples related to html

Examples related to css