附加事件

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/