CODEWITHSUNDEEP
htmlcsscss-selectorscross-browserpseudo-element
Madamadam
Madamadam

Reputation: 938

CSS pointer-events in pseudo element not working in Firefox

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>

Upvotes: 4

Views: 3564

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371639

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>

Upvotes: 2

Related Questions