[voraa]

Как то так

<style id='ist'>
.css_l { border-radius: 14px; border: 2px solid black; color: black; padding: 2px 2px; text-align: center; vertical-align: center; font-size: 14px; margin: 5px 5px; cursor: pointer; }
/* .css_l:focus { outline: none; } */
.css_l::before { content: attr(name); }
.css_l[value='0']::after { content: `url('${pic_p[0]}')`; margin: 1px; } /*  мне хочется сюда нарисовать картинку, что я выше сохранил в JS переменной */
.css_l[value='1']::after { margin: 2px; }
.css_l[value='2']::after { margin: 6px; }
</style>

var pic_b = [];
pic_b[0]="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAB6CAYAAAClS5OpAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGpJREFUaN7t2rENwDAIAEFIw8heHolMYKqku5foELcAOTNxq7uju2MrM6Oq7gszc51zTkTEbFNVs9144ucAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAODfcnvs/qIXQqxBMul12GcAAAAASUVORK5CYII=";

let est = document.getElementById('ist'); // Элемент style
let rules = est.sheet.cssRules; // Список правил
let rule;
for (let i = 0; i<rules.length; i++) {			// Ищем правило с нужным селектором
	if (rules[i].selectorText == ".css_l[value='0']::after") {
		rule = rules[i]; break;
	}
}
rule.style.setProperty('content', `url('${pic_p[0]}')`);  //  Задаем нужное свойство