Remove separator (":before") on a new line

Question

I am using this code to add a separator between menu items.

li:before {
    content: '\00B7';
    float: left;
}

There's any way to remove the separator if I go to a new line? See picture (I want to remove the dot before "Test category 2")

This is what I have:

This is what I want to do:

I don't think it's possible to provide a definite solution without having seen your HTML. — nicael, Jan 18 '16 at 15:14
http://stackoverflow.com/questions/783899/how-can-i-count-text-lines-inside-an-dom-element-can-i is what you need and combine it with dynamic css! — online Thomas, Jan 18 '16 at 15:19
Basically...NO. CSS can't detect where an element's content will wrap. You need JS....or a reasonable set of media queries. — Paulie_D, Jan 18 '16 at 15:22
@Thomas this is a good hint in what I want to achieve - Thank you, and thanks to you all for the answers — Chiara, Jan 19 '16 at 16:14

score 0 · Answer 1 · answered Jan 18 '16 at 16:09

You can combine CSS pseudo-classes like :nth-child or :last-child to do something like:

li:last-child:before {
    content: '';
    float: left;
}

or if it's the third to last

li:nth-last-child(3):before {
    content: '';
    float: left;
}

Then, you could maybe combine this with media queries.

1 Answers1