在伪元素上附加事件

Question

我试图仅在以下小提琴上的 ：after 伪元素上附加一个单击元素：

<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/

但这似乎是不可能的。有没有办法实现这一目标？ 如果没有，有人可以帮助我重写HTML代码以不使用伪元素吗？重要的是，：after 部分永远不会中断到下一行。

提前谢谢。

Answer 1

试试这个

.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 大同小异。 使用字体真棒图标代替"x">

参考链接

Answer 2

伪元素(据我所知(不是DOM的一部分，因此您无法将事件附加到它们。但是，为什么不使用像标签或类似的东西这样的内联元素呢？这会更容易...

Answer 3

您可以使用pointer-eventscss规则将单击事件附加到伪元素，如下所示： https://jsfiddle.net/cq9yzjeb/