简短的回答是你不能。它还没有。

JavaScript 可以访问 DOM，DOM 在从 HTML 加载页面时构建，并在 JavaScript 操作时进一步修改。

甲伪元件是由CSS产生，而不是HTML或JavaScript。它的存在纯粹是为了让 CSS 有所保留，但这一切都发生在 JavaScript 没有任何想法的情况下。

这是应该的。在总体方案中，页面以 HTML 开头。一方面可以使用 JavaScript 来修改其行为并操纵内容，而可以使用 CSS 来控制结果的呈现：

HTML [→ JavaScript] → CSS → Result

您会看到带有伪元素的 CSS 出现在最后，因此 JavaScript 不会被查看。

也可以看看：

• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#Usage_notes
• https://www.w3.org/TR/selectors-api/#grammar

编辑

似乎在现代 JavaScript 中有一种解决方法window.getComputedStyle(element,pseudoElement)：

var element = document.querySelector(' … ');
var styles = window.getComputedStyle(element,':after')
var content = styles['content'];

你应该做这样的事情：

window.getComputedStyle(
    document.querySelector('somedivId'), ':after'
);

此处示例：https : //jsfiddle.net/cfwmqbvn/

我使用一个箭头指向内容和侧边栏将通过 CSS 伪元素来回切换的方向。下面的代码实际上是一种写入模式，但也完全可以读取 CSS 伪元素content。

由于涉及到一些内容，我还将发布先决条件（来源：JAB Creations Web 平台 JavaScript 文档，如果缺少任何内容，请在此处查找），以便那些想要尝试的人可以很快地这样做。

CSS

#menu a[href*='sidebar']::after {content: '\2192' !important;}

JavaScript 使用

css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2192"','important');

JavaScript 先决条件

var sidebar = 20;


function id_(id)
{
 return (document.getElementById(id)) ? document.getElementById(id) : false;
}


function css_rule_set(selector,property,value,important)
{
 try
 {
  for (var i = 0; i<document.styleSheets.length; i++)
  {
   var ss = document.styleSheets[i];
   var r = ss.cssRules ? ss.cssRules : ss.rules;

   for (var j = 0; j<r.length; j++)
   {
    if (r[j].selectorText && r[j].selectorText==selector)
    {
     if (typeof important=='undefined') {r[j].style.setProperty(property,value);}
     else {r[j].style.setProperty(property,value,'important');}
     break;
    }
   }
  }
 }
 catch(e) {if (e.name !== 'SecurityError') {console.log('Developer: '+e);}}
}


function sidebar_toggle()
{
 if (id_('menu_mobile')) {id_('menu_mobile').checked = false;}

 if (getComputedStyle(id_('side')).getPropertyValue('display') == 'none')
 {
  css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2192"','important');

  if (is_mobile())
  {
   css_rule_set('main','display','none','important');
   css_rule_set('#side','width','100%','important');
   css_rule_set('#side','display','block','important');
  }
  else
  {
   css_rule_set('main','width',(100 - sidebar)+'%');
   css_rule_set('#side','display','block');
  }
 }
 else
 {
  css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2190"','important');

  if (is_mobile())
  {
   css_rule_set('main','display','block','important');
   css_rule_set('main','width','100%','important');
   css_rule_set('#side','display','none','important');
  }
  else
  {
   css_rule_set('main','width','100%','important');
   css_rule_set('#side','display','none');
  }
 }

JavaScript 中有一种方法可以在没有任何库的情况下访问伪元素的值。要获取该值，您需要使用“getComputedStyle”函数。第二个参数是可选的。

let elem = window.getComputedStyle(parent, ':before');
alert(elem.getPropertyValue('background'))

这将提醒伪元素的值。