How to reach the pseudo-element?

Question

css

Goodnight. Please tell me why for some styles it works and for others it doesn't.

.form .social {
    width: 100%;
    height: 100%;
    display: none;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    background: rgba(0,0,0, .8);
    border-radius: 4px;
    position: absolute;
    z-index: 999;
}

import styles from '../../../pages/css/lowLvlComponents/form.module.css'; // Подключаем

<form action={`${url}/${action}`} method={method} className={styles.form} id={id}> // Юзаем

                <div className="title">{title}</div>

                <input id='email' name='email' placeholder='E-mail' type='email' required/>
                <input id='password' name='password' placeholder='Пароль' type='password' required/>

                <button className='authentication-submit' type='submit'>Войти</button>

                <li className="form-link"><Link href={`${link}register`}><a>Регистрация</a></Link></li> // Стилей нет

                <button type='button' onClick={(e) => {
                    e.target.closest('form').querySelector('.social').style.display = e.target.closest('form').querySelector('.social').style.display === '' ? 'flex' : '';
                } }>Войти через соц. сети</button>

                <div className="social"> // Стилей нет
                    <div className="socItem fab fa-vk" onClick={(e) => activeSoc(e, 'vk')}/>
                    <div className="socItem fab fa-twitter" onClick={(e) => activeSoc(e)}/>
                    <div className="socItem fab fa-telegram" onClick={(e) => activeSoc(e)}/>
                    <div className="socItem fab fa-facebook" onClick={(e) => activeSoc(e, 'facebook')}/>
                    <div className="socItem fab fa-google" onClick={(e) => activeSoc(e)}/>
                    <div className="socItem fab fa-yandex" onClick={(e) => activeSoc(e)}/>
                    <div className="socItem fas fa-envelope" onClick={(e) => activeSoc(e)}/>
                </div>

                <TelegramLoginButton dataOnauth={handleTelegramResponse} botName="YouDecideBot" />

            </form>

Thank you.

Answer 1

In short, the layout is this - you need to access each element separately, at least it works for me:

<div className={styles.social}>
                        <div className={`${styles.socItem} fab fa-vk`} onClick={(e) => activeSoc(e, 'vk')}/>
                        <div className={`${styles.socItem} fab fa-twitter`} onClick={(e) => activeSoc(e)}/>
                        <div className={`${styles.socItem} fab fa-telegram`} onClick={(e) => activeSoc(e)}/>
                        <div className={`${styles.socItem} fab fa-facebook`} onClick={(e) => activeSoc(e, 'facebook')}/>
                        <div className={`${styles.socItem} fab fa-google`} onClick={(e) => activeSoc(e)}/>
                        <div className={`${styles.socItem} fab fa-yandex`} onClick={(e) => activeSoc(e)}/>
                        <div className={`${styles.socItem} fas fa-envelope`} onClick={(e) => activeSoc(e)}/>
                    </div></button>