html - 在伪元素上附加事件

Question

我试图仅在以下 fiddle 的 :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;
}

差不多。使用超棒的字体图标代替“x”

Link for reference