使用JavaScript，您可以通过这种方式修改.bg:before的规则。
循环样式表中的规则，如果当前规则为.bg:before（r.selectorText == .bg:before），则更改其height（r.style.height = window.innerHeight + 'px'）。

var ss = document.styleSheets;

for (i = 0; i < ss.length; i++) {
  var rules = ss[i];
  for (j = 0; j < rules.cssRules.length; j++) {
    var r = rules.cssRules[j];
    if (r.selectorText == ".bg:before" || r.selectorText == ".bg::before") {
      console.log('Old rule: ' + r.cssText)
      r.style.height = window.innerHeight + 'px';
      console.log('Modified rule: ' + r.cssText)
    }
  }
}

.bg {
  width: 100%;
}
.bg::before {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

你不能用javascript，因为伪元素不是DOM的一部分。

通过一个CSS变量从main元素传递一个值到pseudoelement。main元素可以通过javascript访问，然后计算并更新该值。您也可以设置一个备用值，直到该值更新为止，就像我在这里所做的那样（100%），或者在任何父元素的CSS中为CSS变量设置一个默认值。
所有这些都是代码：在伪类中使用height: var(--bg-height, 100%);，然后在JavaScript中使用element.style.setProperties('--bg-height',document.body.scrollHeight+'px');。
注意，如果你使用vanilla js（我在这里，现在是2022年），在计算文档高度的某些方法上会有一些箱模型的怪异之处。
完整的工作示例如下：

let el = document.getElementById('example');
el.style.setProperty('--bg-height', 
    document.body.scrollHeight+'px');

/*************************************************
  The CSS from the question.  I lightened the grey 
  (dropped the transparency from 0.5 to 0.25) and 
  added a var for height.
 ***/

.bg {
  width:100%;
}

.bg:before {
  position: absolute;
  content: '';
  background: rgba(0,0,0,0.25);
  width: 100%;
  height: var(--bg-height, 100%);
}

/*************************************************
  Following is for this demo and can be removed.
 ***/

:root {
  font: 16px Roboto, Helvetica, Barlow, sans-serif;
}
body {  
}
a { color: #435; }
section>p {
  max-width: 600px;
  margin: 1rem auto;
}

<section class="bg" id="example">
  <p>Here is a section that is the main element being focused on. It has a transparent (thus, white) background.  There is a :before pseudoelement positioned absolutely over it with a highly transparent black (thus a light grey tint).  Using javascript, this pseudoelement is set to a height equal to the document itself.</p>
  <p>Resizing and other things that would change the document height should be taken into account and observed.</p>
  <p>Answer to <a href="https://stackoverflow.com/questions/27358143/how-to-set-height-to-an-element-with-before-selector-with-javascript">How to set height to an element with ::before selector with javascript?</a></p>
</section>