javascript - 如何检测元素是否具有::after(伪元素)？

Question

假设 input元素有伪元素 ::after在该元素的末尾，然后有一个按钮，即有伪元素 ::after之间 input元素和 button元素。例如，请看下面的图片-

在上面的例子中，当 button单击后，一段时间后，input已更改，::after伪元素消失了。

如何检测输入有 ::after还是不？

Answer 1

您可以使用 getComputedStyle(el, '::after').content 获取 ::after 伪元素的内容(适用于 ::之前 也是如此)。如果内容不是none，则伪元素存在。

const hasAfter = selector => {
  const el = document.querySelector(selector);
   
  return getComputedStyle(el, '::after').content !== 'none';
}


console.log(hasAfter('.has')); // true
console.log(hasAfter('.hasnt')); // false

.has::after {
  content: 'after';
}

<p class="has">has </p>

<p class="hasnt">hasn't</p>