I have this form, and I want to change the display property of the pseudo-element ::after of the form's child elements.

This is the line I am using to modify the value:

window.getComputedStyle(document.querySelector('.lf-u-container'), '::before').setProperty('display', 'inline');

HTML for form

<form class="loginForm hidden" id="loginForm">
    <div class="lf-heading">Enter Login Credentials <span><u>Create An Account Instead?</u></span></div>
    <div class="lf-container lf-u-container"><input class="lb-username" id="lf-username" name="username" type="text" placeholder="Enter Username"></div>
    <div class="lf-container lf-p-container"><input class="lb-password" id="lf-password" name="password" type="password" placeholder="Enter Password"></div>
    <div class="input-group">
            <label for="lb-StaySignedIn">Stay Signed In?</label>
            <input class="lb-StaySignedIn" type="checkbox">
            <button type="submit" id="loginSubmit"></button>
    </div>
</form>

The problem is that I get an error message saying that

Uncaught DOMException: Failed to execute 'setProperty' on 'CSSStyleDeclaration': These styles are computed, and therefore the 'display' property is read-only.

So, I would like to know how can I modify the property value of pseudo-elements using JavaScript. There are existing solutions with JQuery, but I am using JavaScript only for my project.