Javascript-форум - Как прятать/показывать псевдоклассы с помощью onclick?

Javascript-форум (https://javascript.ru/forum/)

- Javascript под браузер (https://javascript.ru/forum/css-html/)

- - Как прятать/показывать псевдоклассы с помощью onclick? (https://javascript.ru/forum/css-html/69451-kak-pryatat-pokazyvat-psevdoklassy-s-pomoshhyu-onclick.html)

Как прятать/показывать псевдоклассы с помощью onclick?

Ребят, помогите, не могу догнать как это сделать, вот кусок кода

Код:

  .left-form::before{

  content: '';

  display: none;

  height: 187px;

  width: 246px;

  outline: 4px solid #00aeef;

  position: absolute;

  left: 15px;

  top: 22px;

}

.left-form:focus::before{

display: block;

}

.left-form::after{

  content: '';

  display: none;

    width: 36px;

height: 36px;

background: #00aeef;

background-image: url("../img/ok.png");

background-repeat: no-repeat;

background-position: center;

position: absolute;

right: 72px;

top: 20px;

}

.left-form:focus::after{

display: block;

}

Псевдоклассы в JS недоступны, можно получить значения всех стилей псевдокласса, а изменить нельзя.

<html>
<head>
	<style>
	</style>
</head>
<body>
	<button id="id">Добавить</button>
	<script>
		document.getElementById("id").onclick = function(){
			document.querySelector('style').innerHTML += '\
			.left-form:before{\
				content: "";\
				display: none;\
				height: 187px;\
				width: 246px;\
				outline: 4px solid #00aeef;\
				position: absolute;\
				left: 15px;\
				top: 22px;\
			}\
			.left-form:focus:before{\
				display: block;\
			}\
			.left-form:after{\
				content: "";\
				display: none;\
				width: 36px;\
				height: 36px;\
				background: #00aeef;\
				background-image: url("../img/ok.png");\
				background-repeat: no-repeat;\
				background-position: center;\
				position: absolute;\
				right: 72px;\
				top: 20px;\
			}\
			.left-form:focus:after{\
				display: block;\
			}';
		};
	</script>
</body>
</html>

добавить можно так