Получение и вывод псевдоэлементов через js

[madeas]

Возможно ли вообще вывести псевдоэлементы через js? Если да, то, помогите, пожалуйста, настроить скрипт 2.

ДЕмо: https://jsfiddle.net/6k0L92nu/
где,

1. Есть скрипт, который:
а) добавляет стили div'у в style="", прописанные в data-cls{}
б) добавляет стили и выводит их в textarea:

$('.btn').click(function() {
        $('#bSm').val();
        $('#bSm').css($(this).data('cls'));

        var bsmStyles = $('#bSm').attr('style').replace(/; /g, ';\n');
        var val = $('#form_code').val();

        $('#form_code').val(val.replace(/#bSd \{([\s\S]*?)\}/, `#bSd {\n${bsmStyles}\n}`));
      });

2. Есть похожий скрипт, но он добавляет класс, стили которого прописаны в css:

$(function() {
        var b = $('.btn_cls');
        b.click(function() {
          var cls = $(this).data("cls");
          $('#bSm').toggleClass(cls);
        });
      });

Проблема в том, что добавленный класс не имеет своих свойств, а только добавляет псевдоэлементы :before и :after. Можно ли, по аналогии с первым скриптом, "вытащить" из таблицы стилей значения :before и :after и вставить их в textarea? Например, при добавлении класса utilTwo, в textarea, под #bSd {} должно выводиться так:

#bSd.utilTwo:before {
здесь его стили
}

#bSd.utilTwo:after {
здесь его стили
}

[Dilettante_Pro]

madeas,
Похоже, эти классы вам придется вытаскивать из textContent элемента style

[j0hnik]

<style>
	div:before{
		display: none;
	}
</style>
<div></div>
<script>
console.log(getComputedStyle(document.querySelector('div'),':before').display);
</script>