◆ 擬似要素自体はJavaScriptで取得できないのでイベントを付けられません
◆ 擬似要素を持つ要素でイベントを受け取った時の event.target は 擬似要素を持つ要素自身
:before や :after 擬似要素は実際には存在せず デザインのために仮想的に存在する扱いなのでJavaScriptで取得することは出来ません
document.querySelector("#elem:after") // null

そのため 擬似要素にクリックなどイベントリスナを設定することはできません

それなら 擬似要素をクリックした時のイベントを親要素で取得して イベントが起きた要素 (event.target) を見るとどうなってるんだろう？

気になったのでちょっと試してみました

親要素・子要素・:before・:after の4つを並べて親要素に event.target をコンソールへ出力するリスナを設定します
順番にクリックした結果はこうなりました

<div class=​"base">​…​</div>​
<div class=​"child">​子要素​</div>​
<div class=​"base">​…​</div>​
<div class=​"base">​…​</div>​

子要素意外は 親要素 (擬似要素を持っているクラス) になっています

これは逆に考えると 親要素から離れたところにある(擬似)要素をクリックしても親要素がクリックされてことにできるので何かに使えないかな と思ったんですが :before, :after の2つだけですしその性質を活かせそうな場面が思い浮かびませんでした


サンプルページです ↓
http://var.blog.jp/s/pseudo-elem-eve.html