CODEWITHSUNDEEP
css
Vincent Tschanz
Vincent Tschanz

Reputation: 111

Pseudo element as separator only between elements on the same line

I'd like to find an elegant solution for the following problem.

I have links separated by pipes, in a responsive layout, here's how they should look depending on the width of the viewport :

On a large screen :

link | link | link | link | link

on a smaller screen

link | link | link
   link | link

Notice the pipe separators only appears between the links, not at the beginning or end of a line.

I thought about using a simple :after element to add the | with a :last-child rule to avoid the last item but I'll end up with something like this in case of natural line break :

 link | link | link |
     link | link

Is there a way to do that in pure css? Thanks

Upvotes: 3

Views: 1769

Answers (1)

sol
sol

Reputation: 22959

If you are ok with left-aligning the links when they wrap, you could try something like this:

fiddle

nav {
  overflow: hidden;
}

ul {
  padding: 0;
}

li {
  display: inline-block;
  font-size: 4rem;
  position: relative;
  padding: 0 1rem;
}

li:before {
  content: '|';
  position: absolute;
  left: -.5rem;
}
<nav>
  <ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
  </ul>
</nav>

Upvotes: 2

Related Questions