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

css

responsive-design

best-practices

css-tricks

byNikita Barsukov·Jan 12, 2025

Take advantage of the ::after pseudo-element in CSS and include content: '|' to add a pipe separator. Use the negation pseudo-class :not() with :last-child to ensure it is not added after the last list item.

Here's the shorthand:

ul li:not(:last-child)::after {
  content: '|';     /* The pipe, folks */
  padding: 0 5px;   /* Because everyone needs personal space */
}

This technique makes sure separators only decorate items that aren't lonely at the end of the unordered list.

Solution for line-wrapped list items

The load gets heavier with list items tumbling over to a new line. JavaScript can carry this extra weight, but let's try to trim off some fat with CSS hacks first:

Flexbox: Set display: flex on the list container ul, and allow the list items li to wrap onto new lines with flex-wrap: wrap. This won't take care of the separator problem, but at least the spacing will stop bothering you.
Overflow Control: Throw overflow: hidden onto the list container ul and mix in some negative margins to hide those unnecessary pipelines (we're saving them for Alaska).

In more dynamic and complex scenarios, it's JavaScript or jQuery to the rescue, where you can handle the pipeline visibility based on the width of the list container with a well measured approach on window.resize.

Play clever with pseudo-elements and flexbox

Pseudo-elements ::before and ::after are your secret weapons to add content without disturbing the HTML structure. They don't solve line wrapping issues by default, but once you tame them, they won't give you a hard time.

Visual Adjustments: Give your li elements some room with tacky margin or padding, because who doesn't like a little extra space?

Care for your old browsers and respond to the new ones

Cross-browser compatibility is the golden rule of CSS Tricks, and while old browsers like IE8 might seem like stubborn grandparents not willing to adapt to your modern techniques, they need your attention (and have a lot of users!).

Viewport and Media Queries: Apply vh, vw, or media queries for a wonderful experience on all screen sizes and types (because one size never fits all!).
The Max-Width: Pop-in a max-width attribute on the container ul to control its width and avoid text run-offs on smaller viewports.
IE8 Friendly: If IE8 is on your support list, consider using a JavaScript-based solution or adjust your stylesheets with conditions to specifically target these browsers (let's do our bit for digital inclusivity).

Dodge the common Goofs

Here are a few code-grenades you should dodge when styling lists with separators:

Unwanted Borders: Be cautious not to add unwanted borders to your lis and only target what's needed with pseudo-classes. We are separator artists, not border fanatics!
Dynamic Sizing: Fixed widths are so last decade! Choose relative sizing or responsive units (like em, rem, %, vh, vw) instead.
The Unstyled list: Don't forget to sanitize your list with list-style:none before you style (because who likes default bullets?)

Practical examples and resources

Here are some useful resources to dive into the techniques discussed:

CSS-Tricks Library: An ocean of knowledge on everything CSS from pseudo-classes to flexbox and grids. What more could a coding pirate wish for!
JavaScript Dynamic Styling: Build a fully responsive list separator with JavaScript. Psst, jQuery is your best buddy here.

explain-codes / Css / Add a pipe separator after items in an unordered list unless that item is the last on a line

Linked

How to Make a `` Display in a Horizontal Row



Force flex item to span full row width



How to specify line breaks in a multi-line flexbox layout?



Horizontal list items



Two inline-block, width 50% elements wrap to the second line

