css 如何使游标忽略Firefox中的伪元素？

6rqinv9w 于 2023-11-19 发布在其他

关注(0)|答案(1)|浏览(104)

在Firefox中，如果光标像这样开始，

`123`|

字符串
我按了两次左箭头，我想让它落在2的左侧：

`1|23`

型
就像没有伪元素时一样
有什么想法吗？

.code {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.05);
}

.pseudo-ele::after {
  content: "3";
}

<div contenteditable>
  <span>`</span><span class="code pseudo-ele">12</span><span>`</span>
</div>

的字符串

1条答案

这不起作用，因为contenteditable允许编辑HTML本身，因此伪元素也被编辑。您必须更改在页面上编辑HTML的方式，以允许其在Firefox上工作。
要在除Firefox以外的所有浏览器上修复此问题，请使用此方法：

.code {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.05);
}

.pseudo-ele::after {
  content: "3";
  pointer-events: none;
}

个字符