Wie bekomme ich einen DOM-Element :: before-Inhalt mit JavaScript?

Question

Ich möchte wissen, ob es möglich ist, einen Inhalt ::before eines DOM-Elements zu erhalten, das von CSS3 festgelegt wurde.

Ich habe einige Wege versucht, aber ich kann es immer noch nicht schaffen, also ist es sehr verwirrend für mich!

// 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; 

Dies ist der Fall:

Answer 1

Pass ":before" als zweiten Parameter zu window.getComputedStyle():

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

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

<p>Lorem Ipsum</p>

Answer 2

getComputedStyle() & getPropertyValue()

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