0

For those, who failed to spot it before, hoisted here:

NO JS frameworks please. Even little ones.

And let me add: no libraries as well, for those who want to propose jQuery saying it's a library, not a framework. :P

I have list items with icons, via:

li:after {
  content: "   :  "  url(ncheck.png)  url(ntrash.png);
}

Question: upon clicking the icons I want to run JS code (different for trash and check). How to do so with pure CSS / native JS? Intent: I'm wondering whether content inserted via ::after can be made actionable.

I'm working on making this happen via img tags (image button technique), however wanted to know, whether I missed something, and whether this can be done using CSS ::after.

PS. Browser support: FF is a must, Chrome is a nicety.

Updated - why that content should NOT be actionable

In the end I decided against using ::after for actionable content. Reasons:

  1. CSS for actionable content is meh
  2. Content added with ::after is added AFTER element, but before next element. So, adding span and making span actionable requires further tweaking and arm-twisting in order to move the span from it's actual position. Too weird, too hacky to really be worthwhile.
  3. There's absolutely lovely piece of why neither DIVs nor SPANs are BUTTONs.

So, I went with adding input type="image" instead.

Thanks to TJCrowder and Harry for their time and help here.

LAFK 4Monica_banAI_modStrike
  • 2,840
  • 35
  • 53
  • 5
    I think many people haven't understood your question but as far as I know the pseudo elements and its content are not part of the DOM and hence you wouldn't be able to make them actionable (that is, you can't attach an event listener to it). – Harry Aug 15 '15 at 13:41
  • Indeed, that seems to be the case @Harry. Thank you for your comment. Upon noticing the downvotes, close votes and duplicate flags I heavily edited the question, thanks for taking the time to read it in full. :-) Among the first folks to react, that was not so common. :-) – LAFK 4Monica_banAI_modStrike Aug 15 '15 at 13:53
  • Possibly a duplicate of http://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element, certainly related anyway. – T.J. Crowder Aug 15 '15 at 13:54
  • @LIttleAncientForestKami: Happy to help mate :) You are welcome. – Harry Aug 15 '15 at 13:59

1 Answers1

2

You cannot detect clicks on pseudo-elements at all.

So if you wanted to have the user seem to be clicking the pseudo-elements, you'd have to be detecting clicks on whatever's underneath them instead. Depending on your structure, that mean adding elements and so negating the benefit of the pseudo-elements, but it depends on your reasons for using pseudo-elements in the first place.

It could be that your structure already has something there for you to detect clicks on. If so, you could then figure out which "button" was clicked by comparing the click's coordinates with those of the element they're attached to. But again, it depends on your structure.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875