Question

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

<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代码，以便不使用伪元素吗？重要的是：之后部分永远不会突破到下一行。

提前致谢。

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大致相同。使用font-awesome图标代替＆＃39; x＆＃39;

Link for reference

Answer 2

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

Answer 3

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

在伪元素上附加事件

3 个答案: