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

by

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.

More Related Contents:

  1. Text in my heading should be top not bottom [closed]
  2. CSS indentation not working [closed]
  3. How do you keep parents of floated elements from collapsing? [duplicate]
  4. Cut Corners using CSS
  5. What to use in place of ::ng-deep
  6. CSS Grid Layout not working in IE11 even with prefixes
  7. How to center elements on the last row in CSS Grid?
  8. How to deal with page breaks when printing a large HTML table
  9. Using margin:auto to vertically-align a div
  10. How do I change the color of radio buttons?
  11. How can I draw vertical text with CSS cross-browser?
  12. Is clearfix deprecated?
  13. CSS-Only Scrollable Table with fixed headers [duplicate]
  14. Position: absolute and parent height?
  15. Pure CSS multi-level drop-down menu
  16. Responsive CSS Trapezoid Shape
  17. How can I set the max-width of a table cell using percentages?
  18. make div’s height expand with its content
  19. CSS Background Opacity [duplicate]
  20. Make link in table cell fill the entire row height
  21. Flex items not respecting margins and box-sizing: border-box
  22. Why is text wrapping around a floating element instead of going belows like another div?
  23. Align the form to the center in Bootstrap 4 [duplicate]
  24. CSS for changing color of last word in h1
  25. Rounded corners in outlook without images
  26. Skewed Borders on a Div
  27. body { overflow-x: hidden; } breaks position: sticky
  28. Prevent a centered layout from shifting its position when scrollbar appears
  29. Adding text before list
  30. CSS/HTML: How do I change the color of the check mark within the checkbox input? [duplicate]

Leave a Comment