How to get a DOM element's ::before content with JavaScript?

Question

I want to know whether it is possible to get a DOM element's ::before content, which was set by CSS3.

I have tried some ways, but I still can't make it, so it's very confusing to me!

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

This is the case:

Davilman

getComputedStyle(links[0], '::after').getPropertyValue('content'); – Davilman

Answer 1

Pass ":before" as the second parameter to window.getComputedStyle():

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

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

<p>Lorem Ipsum</p>

Helotry

Answer 2

getComputedStyle() & getPropertyValue()

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

Nephro

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>

Caseycash

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Starla