js-querySelector在伪类:: before

Question

我想用querySelector方法获得一个伪类:: before的元素，如何在普通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')