附加事件

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”

Link for reference

Answer 2

伪元素的使用字体真棒图标（据我所知）没有DOM的一部分，所以你不能将事件附加给他们。但是，为什么不使用像标签这样的内联元素呢？这将是更容易...

Answer 3

您可以使用CSS pointer-events规则，这样的点击事件附加到伪元素：https://jsfiddle.net/cq9yzjeb/