javascript - 可以将伪类 (::after) 添加为 HTML 标记的一部分吗？

Question

我想在悬停时显示工具提示。下面是用于处理工具提示的提示(箭头)的 html/css 代码。我正在使用伪元素 ::after 为箭头添加样式

HTML:

<div class="tooltip">Hello on hover me</div> 

CSS:

.tool-tip::after {
  content: " ";
  position: absolute;
  border-width: 5px;
  border-style: solid;
  margin-left: -5px;
  top: 100%;
  **left: 50%;** // I want to have this value based on some condition, i.e if number is positive => 50%, else 0%;
  border-color: toolTipBGColor transparent transparent;
}

如上所述，我希望在伪类中定义一个基于条件的 css 属性，因此我不希望将其作为 css 的一部分，我希望将其作为 html 模板的一部分，以便我可以添加必要条件并填充正确的值。类似于添加内联样式，这将是一个伪类。

这是否可能，或者是否有其他方法来处理这种情况？

Answer 1

您可以在 css 中的一些附加类中指定它，例如:

.activated::after{
   ....
}

然后根据条件添加或删除类。

if(condition) {
    element.classList.add('activated');
}