Using CSS Pseudo Elements, insert content that has a click handler

I'm doing something very simple, like this:

<div class='item'>HI I'm an item</div>

.item:hover:after {
content: "Delete";
}

What i want to do is when the user hovers over the div, for the word Delete to appear and have it possible that when the user clicks on the word Delete, for me to run some jQuery 开发者_StackOverflow社区(to actually remove this item)

Is this possible?

---

That's just not possible, sorry. Pseudo-elements are purely for presentation purposes.

Yes, i just wanted to avoid extra markup with spans etc...

For something as important as a "Delete" link, the proper place for this to go is in the HTML.

---

If you really don't want this in the HTML (maybe you have extenuating circumstances), you might as well just do it using a little more jQuery:

$('<span class="del">Delete</span>').appendTo('.item').click(function() {
    alert('deleted');
});

.del {
    display: none;
}
.item:hover .del {
    display: inline;
}

---

That's not possible. You can accomplish the desired results in this way: CSS:

.item > .del {
    /* "A > B" means: Select element B which is the direct child of A.
     * You surely don't want all nested .del elements to collapse. */
    width: 100px;
    height: 30px;
    display: none;
    /*Additional styles*/
}
.item:hover > .del{
    display:inline-block;
}

HTML:

<div class="item">
   Blabla
   <div class="del" onclick="doSomething()">Delete</div>
</div>

---

you can totally do that, although i'm not sure about "delete"....do you mean just take it out of the DOM? if so, here's your solution. http://jsfiddle.net/jalbertbowdenii/UVxWq/

ok, here's the solution for your specification: http://jsfiddle.net/jalbertbowdenii/UVxWq/ delete shows up on hover and onclick deletes the .item. no extra markup.