Как переключить свойства ::after с помощью JS [дубликат] ⇐ CSS

[Anonymous]

Я делаю сайт и есть страница подписки, где есть четыре кнопки. У меня есть кружок в правом верхнем углу контейнера, содержащего кнопку. круг состоит из элемента ::before, который всегда отображается, есть также элемент ::after, который я хочу переключать при нажатии кнопки, чтобы он отмечал, для какой подписки отображается информация, но я не могу придумать способ переключения отображения элемента ::after на блокировку с помощью JS.

Код: Выделить всё

function openCity(evt, cityName){
var i, tabcontent;

tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

document.getElementById(cityName).style.display = "block";
}

Код: Выделить всё

.tab{
display:flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 4rem;
}

.tablinks{
all: unset;
background: #111111;
padding: 2rem;
width: 10rem;
border-radius: 10px;
text-align: center;
font-size: 1.5rem;
position: relative;
cursor: pointer;
}

.container{
position: relative
}

.circle{
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
}

.circle::before{
content: '';
position: absolute;
top: 50%;
right: 2.5px;
transform: translate(0%, -50%);
border-radius: 50%;
width: 25px;
height: 25px;
background-color: #e8f1f2;
}

.circle::after{
content: '';
position: absolute;
display: none;
top: 50%;
right: 7.5px;
transform: translate(0%, -50%);
border-radius: 50%;
width: 15px;
height: 15px;
background-color: var(--secondary-color);
}

.tabcontent{
display: none;
}

Код: Выделить всё

1



3



6



12




1
3
6
12

Подробнее здесь: https://stackoverflow.com/questions/792 ... es-with-js