Reputation: 111
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
Reputation: 22959
If you are ok with left-aligning the links when they wrap, you could try something like this:
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