如何使用 JavaScript 获取 DOM 元素的 ::before 内容？

Question

我想知道是否可以获取DOM元素的

::before

内容，这是由CSS3设置的。

我尝试了一些方法，但还是不行，所以我很困惑！

// https://rollbar.com/docs/

const links = document.querySelectorAll(`ul.image-list a`);

links[0];
// <a href="/docs/notifier/rollbar-gem/" class="ruby">::before Ruby</a>

links[0];
//

links[0].textContent;
//"Ruby"

links[0].innerText;
// "Ruby"

links[0].innerHTML;
// "Ruby"

// ??? links[0]::before;

情况是这样的：

Answer 1

将

":before"

作为第二个参数传递给

window.getComputedStyle()

:

console.log(getComputedStyle(document.querySelector('p'), ':before').getPropertyValue('content'));

p::before,
p::after {
  content: ' Test ';
}

<p>Lorem Ipsum</p>

Answer 2

getCompulatedStyle() 和 getPropertyValue()

getComputedStyle(document.querySelector('span.search-box'), '::after').getPropertyValue('content');

Answer 3

    document.addEventListener('DOMContentLoaded', function() {
      var widthval = 12;
      var style = document.createElement('style');
      style.innerHTML = '.classname::before {content: " ! "; color: red; width: ' + widthval + 'px !important;}';
      document.head.appendChild(style);
    });

 <div class="classname">
        Main Title
    </div>