How to reach for the header-section:before from the JS for styling

I want to change the background color in the header-section:before depending on the value.

this is the html part

<section class="header-section" id="main-header"> 
    <div class="content">
        <div class="header"> 
            <h1>
                <span id="temperature"></span>
                <span id="todays-img"></span>
            </h1>
        </div>
        <h2><span id="city-name"></span></h2>
        <p><span id="description"></span></p>
        <div class="sunrise-sunset">
            <p class="sun-child"><span id="sunrise"></span></p>
            <p class="sun-child"><span id="sunset"></span></p>
        </div>
    </div>
</section>

in the css the background color is defined under:

.header-section:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    background: linear-gradient(45deg, #8AB7F8, #D6E4F9);
    border-radius: 0 0 50% 50%/0 0 50% 50%;
    transform: scalex(1.5);
}

and this is what I have in the JS, which is changing the color of the header-section , but not the header-section:before

    const headerBackground = document.getElementById('main-header');

    const checkTemperature = () => {
      if (filteredForecast[0].main.temp < 0) {
        headerBackground.style.backgroundColor = '#BDCBF5';
      }

So now it is changing the color of the header-section and not the header-section:before. How can I reach for the header-section:before in the JS since I can't get it from the html by document.getElementById.