Recently while writing CSS for a site’s navigation I needed to add separation between navigation items. Basically a bullet between each item of navigation. The most common method would be to use the CSS pseudo elements “after/before” for this so I went ahead and set it up. Here is the markup for navigation that is basically a simple unordered list:
Here is the CSS that styles the above unordered list:
Following CSS would add a bullet after each item as an
::after pseudo element.
Now that bullet is added after each item in navigation, it looks a bit odd to have a bullet in front of last item. So we can remove it by following two methods:
By hiding it:
By setting empty content:
In both cases we have basically hid the element or it’s content but the element itself still exists. Using
:not CSS selector instead will not create the pseudo element in first place – eliminating the need of extra efforts to hide it. Here is an example using
:not CSS selector:
I am not sure what impact it might have on performance as I have not tested it but nontheless it seems like a better option to go with.