由于DOM中不存在伪元素，因此无法在Javascript中访问它们。解决方法是创建一个<span>，而不是使用:before，并且必须应用相同的逻辑。

以下是直接操作伪元素的两种方法：

1 -使用某种 * 样式管理器 *

这个“管理器”是一个带有方法的对象，它允许更容易地动态操作CSS规则，所以这里是一个非常基本的示例，您可以根据自己的特定需要学习和实现它：

var elm = document.querySelector('main');

// Reference: https://stackoverflow.com/a/28930990/104380
var styleManager = (function() {
    // Create the <style> tag
    var style = document.createElement("style")

    // WebKit hack
    style.appendChild(document.createTextNode(""));

    // Add the <style> element to the page
    document.head.appendChild(style);
    
    function getStyleRuleIndexBySelector(selector, prop){
      var result = [], i,
          value = (prop ? selector + "{" + prop + "}" : selector).replace(/\s/g, ''), // remove whitespaces
          s = prop ? "cssText" : "selectorText";

      for( i=0; i < style.sheet.cssRules.length; i++ )
        if( style.sheet.cssRules[i][s].replace(/\s/g, '') == value)
          result.push(i);

      return result;
    };

    return {
      style : style,
      
      getStyleRuleIndexBySelector : getStyleRuleIndexBySelector,
      
      add(prop, value){
        return style.sheet.insertRule(`${prop}{${value}}`, style.sheet.cssRules.length);
      },
      
      remove(selector, prop){
        var indexes = getStyleRuleIndexBySelector(selector, prop), i = indexes.length;
        
        // reversed iteration so indexes won't change after deletion for each iteration
        for( ; i-- ; )
          style.sheet.deleteRule( indexes[i] );
      }
    }
})();

elm.addEventListener('mouseenter', function(){
   // each new rule should be added the END of the sheet
   styleManager.add('main::before','left:90%; top:60%;');
   styleManager.add('main::before','left:70%;');
});

elm.addEventListener('mouseleave', function(){
  styleManager.remove('main::before', 'left:70%;');  // you can also try without the "left:70%;" part
});

main{  
  position:relative;
  width: 200px;
  height: 200px;
  border: 1px dashed silver;
}

main::before{
  content: 'pseudo';
  width: 100px;
  height: 100px;
  background: lightgreen;
  position: absolute;
  left: 10px;
  top: 40px;
  
  transition:.3s ease-out;
}

<main>Hover &amp; out</main>

2 -使用CSS变量：

一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个