Permalink
Fetching contributors…
Cannot retrieve contributors at this time
89 lines (72 sloc) 2.38 KB
layout title date categories tags excerpt permalink thumbnail comment private
post
CSS pseudo elements
2016-06-03 00:00:00 -0700
articles
CSS
CSS3
pseudo elements
Comparing two different use cases for CSS pseudo elements
true
false

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:

{% highlight html %}

  • Home
  • Foo
  • Bar
  • Baz
{% endhighlight %}

Here is the CSS that styles the above unordered list:

{% highlight css %} .site__nav { list-style-type: none; margin: 0; padding: 0; } .site__nav-item { display: inline-block; position: relative; margin-left: 10px; } {% endhighlight %}

Following CSS would add a bullet after each item as an ::after pseudo element.

{% highlight css %} .site__nav-item::after { position: absolute; display: inline-block; content: '\2022'; color: #ddd; line-height: inherit; margin-left: 10px; } {% endhighlight %}

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:

{% highlight css %} .site__nav-item:last-child::after { display: none; } {% endhighlight %}

By setting empty content:

{% highlight css %} .site__nav-item:last-child::after { content: ' '; } {% endhighlight %}

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:

{% highlight css %} .site__nav-item:not(:last-child)::after { position: absolute; display: inline-block; content: '\2022'; color: #ddd; line-height: inherit; margin-left: 10px; } {% endhighlight %}

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.