How can I set a property value to my computedStyle variable, and how can I complete the form validation by allowing to resume when the error is fixed?

Question

I'm trying to reveal an error message by setting the opacity back to 1 when the error occurs, but I'm having trouble applying styling to the ::after psuedo-element using JS. Also, whenever I click on the form submit button, nothing occurs, even if the passwords match, as I don't know how to resume it after using e.preventDefault(). How can I complete the password-validation checker?

Here is a link to the html and main css file on JSFiddle, if that is necessary to solve the problem.

const form = document.getElementById("main-form");
const password1 = document.getElementById("pass");
const password2 = document.getElementById("conf-pass");
const passLabel1 = document.querySelector(".passLabel1");
const passLabel2 = document.querySelector(".passLabel2");
const passLabel1After = window.getComputedStyle(passLabel1, "::after");
const passLabel2After = window.getComputedStyle(passLabel2, "::after");



form.addEventListener("submit", (e)=> {
    e.preventDefault();
    checkPasswords();
});

function checkPasswords (){
    const pass1Value = password1.value.trim();
    const pass2Value = password2.value.trim();

    if (pass1Value !== pass2Value) {
        passLabel1After.setProperty("opacity", 1);
        passLabel2After.setProperty("opacity", 1);
    } else {

    }
}