Question

How can I add a live event binding to :after selector? Here’s what I tried without success:

css rules

div.k-tabstrip .k-link:after
{
    content: url("/icons/close.gif");
    width: 16px;
    height: 16px;
    display: inline-block;
    margin: 0px;
    margin-left: 10px;
}

js

$(document).on("click",".k-link:after", function(){ alert("Goodbye!"); });

Answer 1

You can’t. Content added by :after and the content property does not become part of the DOM and is therefore not accessible by JavaScript.

Note that the content is not added to the DOM at all, so it doesn’t become part of the element it was applied to, and it doesn’t become a node in it’s own right. It just sort of sits there on its own, unaware of the world around it.