CSS pointer-events in pseudo element not working in Firefox

Question

I've got a horizontal menu with mid-dots (inserted via ::after pseudo element) separating the menu items. I would like to disable linking on the mid-dots.

In Safari this works as expected, but on Firefox (v.47), the pointer-events: none is ignored.

Does someone know a workaround?

My code (and a Fiddle, too: https://jsfiddle.net/54gmfxax/ ):

 a { text-decoration: none; } ul li { list-style-image: none; list-style-type: none; margin-left: 0; white-space: nowrap; display: inline; float: left; } ul li a::after { padding: 0em 1em; content: '\\00b7'; pointer-events: none; } ul li.last a::after { content: none; } 

 <ul class="menu"> <li class="first"><a href="#1" title="">Item 1</a> </li> <li class="leaf"><a href="#2" title="">Item 2</a> </li> <li class="leaf"><a href="#3" title="">Item 3</a> </li> <li class="last leaf"><a href="#4" title="">Item 4</a> </li> </ul> 

Answer 1

Instead of putting the ::after pseudo-elements on the anchor elements:

ul li a::after {
  padding: 0em 1em;
  content: '\00b7';
  pointer-events: none;
}
ul li.last a::after {
  content: none;
}

... put them on the list items:

ul li::after {
  padding: 0em 1em;
  content: '\00b7';
  /* pointer-events: none; (not necessary) */
}
ul li.last::after {
  content: none;
}

 a { text-decoration: none; } ul li { list-style-image: none; list-style-type: none; margin-left: 0; white-space: nowrap; display: inline; float: left; } ul li::after { padding: 0em 1em; content: '\\00b7'; pointer-events: none; } ul li.last::after { content: none; } 

 <ul class="menu"> <li class="first"><a href="#1" title="">Item 1</a> </li> <li class="leaf"><a href="#2" title="">Item 2</a> </li> <li class="leaf"><a href="#3" title="">Item 3</a> </li> <li class="last leaf"><a href="#4" title="">Item 4</a> </li> </ul>