Attach event on pseudo-element - html

Question

I'm trying to attach a click element only on the :after pseudo-element on the following fiddle:
<div class="tag deletable", style="style")>
Tagname
</div>
.tag {
display: inline-block;
background: white;
padding: 3px 6px;
line-height: 1em;
border-radius: 4px;
font-size: 12px;
border-right: 5px solid;
}
.deletable {
border-right: 18px solid;
position: relative;
}
.deletable:after {
content: "\D7";
position: absolute;
color: white;
right: -12px;
top: 3px;
font-size: 12px;
cursor: pointer;
}
https://jsfiddle.net/x2ztqdbm/
But it seems that is not possible. Is there a way to achieve that?
If not, can someone help me rewriting the HTML code in order to not use a pseudo-element? It's important that the :after section never breaks to the next line.
Thanks in advance.

Answer 1

Try This
HTML
<div class="tag deletable", style="style")>
Tagname
<span class="wrong">x</span>
</div>
CSS
.tag {
display: inline-block;
background: white;
padding: 3px 6px;
line-height: 1em;
border-radius: 4px;
font-size: 12px;
border-right: 5px solid;
}
.deletable {
border-right: 18px solid;
position: relative;
}
.wrong {
position: absolute;
color: white;
right: -12px;
top: 3px;
font-size: 12px;
cursor: pointer;
}
Preety much the same. use a font-awesome icon in place of 'x'
Link for reference

Answer 2

Pseudo elements (as far as I know) are not part of the DOM, so you can't attach events to them. However, why not using an inline element like a tag or something like that? It would be even easier...

Answer 3

You can attach a click event to a pseudo element using the pointer-events css-rule, like this: https://jsfiddle.net/cq9yzjeb/