- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Not sure if this should be in the JS or the CSS forum so I’ll start here.
The scenario: I have a list of cities that are displayed on a single line with a separator symbol, which is *. So I have this basically
city * city * city * city * city
The * is added via ::after and the last one is removed via :last-child::after
The issue becomes when the line wraps and I’m left with a * symbol at the end of the wrapped line, like this
city * city * city *
city * city
I’d like to hide that * at the end of the first line. Is this possible?
…Mike
Could you not swap it out for a :before
and remove it from the 1st item?
Hmmm…no, on second thought all that will do is give you a separator at the start of the second line.
JS is the answer…I feel.
The codepen: http://codepen.io/theMikeD/pen/VYmByx
Hmm…The Js looks to be quite complex based on a Google search…and I’m suspecting that it might be more trouble than it’s worth.
It can be done, but it’s a little hacky and it will only work when the cities are aligned left.
Put all the items in a wrapping DIV. Make the asterisk appear BEFORE every item — even the first one. Then shift everything a little to the left, so that every asterisk that appears as the first character of a line, will be hidden from view.
See http://codepen.io/senff/pen/XJNBLa (wrapping DIV has border just to show where it’s at).
How about this http://codepen.io/theMikeD/pen/RNoYbd
That doesn’t really work if you change the width of that DIV.
Try changing it to 100px (or 300px) and see what happens.
I think this does it. http://codepen.io/theMikeD/pen/VYmGqZ