I have a horizontal menu that includes mid-dots (inserted using the ::after pseudo element) to separate the menu items. I want to prevent these mid-dots from being clickable.
This works fine in Safari, but in Firefox (v.47), the pointer-events: none property is not working as expected.
Is there a workaround for this issue?
Here is my code snippet (you can also view it on Fiddle: 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>