prevent a pseudo element from triggering hover?

by

The following css does the trick for modern browsers (not IE10-):

.b:after {
  pointer-events: none;
}

pointer-events: none allows elements to not receive hover/click events.

See this fiddle.

Caution

pointer-events support for non-SVG elements is in a relative early state. developer.mozilla.org gives you the following warning:

The use of pointer-events in CSS for non-SVG elements is
experimental. The feature used to be part of the CSS3 UI draft
specification but, due to many open issues, has been postponed to
CSS4.

Chrome’s box model interpretation of display: inline-block causes a flicker in the above fiddle.
If you switch to display: block instead, you will get the proper interpretation of the box.
Firefox does not have this issue.
To ensure consistent box model interpretation, use the following:

.b:after {
  pointer-events: none;
  display: block;
}

View this fiddle in Chrome to see the flicker effect.

More Related Contents:

  1. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  2. Is it possible to set the stacking order of pseudo-elements below their parent element? [duplicate]
  3. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  4. CSS :after not adding content to certain elements
  5. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  6. Change opacity on all elements except hovered one
  7. Can I change the height of an image in CSS :before/:after pseudo-elements?
  8. CSS :before on inline SVG
  9. CSS: Hover one element, effect for multiple elements?
  10. Can I target a :before or :after pseudo-element with a sibling combinator?
  11. Should I use single or double colon notation for pseudo-elements?
  12. CSS disable hover effect
  13. How can I make generated content selectable?
  14. Add line break to ::after or ::before pseudo-element content
  15. Universal selector * and pseudo elements
  16. Can I have multiple :before pseudo-elements for the same element?
  17. image moves on hover – chrome opacity issue
  18. Z-index with before pseudo-element
  19. CSS Pseudo Element Counters: can you increment an alphabet letter “a”, “b”, “c”, etc instead of a number?
  20. Vertically centering content of :before/:after pseudo-elements
  21. “text-decoration” and the “:after” pseudo-element, revisited
  22. div background color, to change onhover
  23. css rotate a pseudo :after or :before content:”” [duplicate]
  24. CSS hover border makes elements adjust slightly
  25. Is it possible to change only the alpha of a rgba background colour on hover?
  26. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  27. Can you apply a width to a :before/:after pseudo-element (content:url(image))?
  28. How to apply child:hover but not parent:hover
  29. Apply webkit scrollbar style to specified element
  30. Combine CSS Attribute and Pseudo-Element Selectors?

Leave a Comment