js - querySelector выбирает и редактирует стили в псевдоклассе :: before

Question

Я хочу получить методом querySelector элемент с псевдоклассом :: before, Как я могу сделать это в vanilla Js?Это моя попытка:

const menuDropdown = document.querySelectorAll('[class$="menu-dropdown"');
const about = document.querySelector('#about');

about.addEventListener('mouseover', function () {

    for(let el of menuDropdown) {
        console.log(el);
        el.style.opacity = '1';
        el.style.visibility = 'visible';
    }

})

.menu-dropdown:before {
    content: '';
    position: absolute;
    background-color: black;
    display: block;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    height: 30px;
    width: 30px;
    opacity: 0;
    visibility: hidden;
}

<div id="about">
  <ul class="menu-dropdown">
      <li><a href="#">Aktualności</a></li>
      <li><a href="#">Nasz team</a></li>
      <li><a href="#">Historia</a></li>
  </ul>
</div>

Answer 1

Я изменил код, чтобы показать непрозрачность псевдоэлемента элемента, над которым находится мышь.

const menuDropdown = document.querySelector('.menu-dropdown');
const about = document.querySelector('#about');

about.addEventListener('mouseover', function () {
  menuDropdown.classList.add('make-visible');
});
about.addEventListener('mouseout', function () {
 menuDropdown.classList.remove('make-visible');
});

.menu-dropdown:before {
    content: '';
    position: absolute;
    background-color: black;
    display: block;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    height: 30px;
    width: 30px;
    opacity: 0;
    visibility: hidden;
}

.make-visible:before {
  opacity: 1;
  visibility: visible;
}

<div id="about">
  <ul class="menu-dropdown">
      <li><a href="#">Aktualności</a></li>
      <li><a href="#">Nasz team</a></li>
      <li><a href="#">Historia</a></li>
  </ul>
</div>

Answer 2

Попробуйте это getComputedStyle(document.querySelector('.menu-dropdown'), ':before')