Изменить размер картинки, вставленной через content нельзя
Можно вставить псевдоэлемент after как блок и задать ему картинку, как background.
Размеры лучше указывать непосредственно в пикселях, т.к. при указании в % эти % берутся не от размера картинки, а от размеров родительского блока.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head id="head"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" id="my_style_id">
.css_l {
border-radius: 14px;
border: 2px solid black;
color: black;
padding: 2px 2px;
font-size: 14px; margin: 5px 5px;
cursor: pointer;
}
.css_l::before { content: attr(name); }
.css_l[value="0"]::after { margin: 6px; }
.css_l[value="1"]::after {
display: inline-block;
background-size: 24px 24px;
width: 24px;
height: 24px;
position: relative;
margin: 1px;
content: '';
vertical-align: middle;
}
.css_l[value="2"]::after { margin: 1px; }
</style>
</head>
<body bgproperties=fixed>
<div id="my_div"> </div>
<script>
var pic_b = [];
pic_b[3]="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH4AAAB+CAYAAADiI6WIAAAACXBIWXMAAAsTAAALEwEAmpwYAAALmUlEQVR42u2deVRTVx7Hv1kIEMK+Ly4gIGELCnIoLrVKcWm1LWJrHVutM1U5pz3T45n2tKd17HR6Tqedc2Y6nbbq1Fp1OnVFqVbrymhlscguWxBBZE/YCYEESOaP1i6OgUBukvde7udPyPu9936f5L1777v393h6vR4U24NPU0DFU2wI4WQ+3DukRHVH0eJaRdn2bnVHyoCmz1GtHaBZtAJikTOc7V3hIfYtDveJy4ryT/zKxd79trHb84y5xytVrfzzNYfTKtquvwZgHk07M4nxTzq2TLruJS+nAIXJ4rNvnVhwSX70E51eF0tTy4J7N4/fkRqx7oXFoU9+O2Xxh4r/8WlZS+5W2hZgHfo5QQvfeGbOy+9PWvyhog/3l7XmbaQ5ZC9zghZue2bOy3uMbtVn12ZuotLZT0nztY+v1GWlGiVeqWpxvSg/9leaNm702i7UHD7YOdjmMqH4c9WHXtdD50Vzxg10ep3v+epDr44rvmdIyatsL9hM08UtbrZd39Kv6eEZFF/dXhQBwIeminP4VLYVRBsUX6soXUxzxE1qFaXJBsV3qTsW0hRxk251R5hB8SpN38M0RdxkQNM3y6D4oRFVAE0RN1FrB0LG7c5ROAsVb6NIqHgKFU/FU2wKIU2BdeCBBzdHL9gJ7DGo7cegtp+K5zKRfglImLYE4T6xEPJFP/1dqWpBUdNV5DZ8i5ExDRXPFZzt3bA+/hUEe0Y+8P/ekkAsl65HcvBy/Kfwb2jsqaX3eLbj5uiFlxa9Z1D6L3Fx8MCW+W8j1DuWimczAr4Qz897Fa4OnsZvwxNiQ8J2uDh4UPFsJSV8LQJcgye9nYNQjJTwdCqejfi7zMTDoaunvH1c0AII+EIqnk3weXykx20DnyeYcgyRwAHT3cOpeDaxaNZqBLqGmBzH3dGbimcLXk7+SJlN5v4sFNhR8WxhTdy2Xw3OmIJK00vFs4GkmakI9pASiaWHDne65VQ803F18MQK6W+IxatTVsBcy9CpeII8JXsR9kJHYvEuyY/RfjzTmRO0EBE+c4nFK26+isYeORXPZJxELlgVtYlYPJWmD6crDph3nIFqM53VMZshFjkTi3eqYh+GRlRUPJOR+sZDFpBMLF5V+w2Ut+ab/bipeBNwEIrxVOyLxOINj6pxsnyvRY6dijeBlZEbiD46PVN5EAOaHiqeyYR4RmLejKXE4t3urMCNu9kWO34qfgoI+SKsidsGHnhE4o2MaZBZttui50DFT4HUiGfgKfYjFu9CzRF0qxVUPJMJcpuFBSGPEYvX1FuHnPozFj8PKn4yyeIJkC7LAJ9HJm1j+lEcL90FPfRUPJN5JOwp+LlMJxbvyq0sdAw0WedLTHUah69zEJaEpRGL1zHQhOzaE9a7elGlE8MDD+myDGITH/XQ4XjpLozpR6l4JjM/ZCWmuYcRi5db/y2aeuus216hWsfHXeyDZRHriMXrVitwvuaQ9RuqVO34rJFthZ3Anli8zLLdGBnTUvFMJmH6EoR6xRCLV3g3G7c7K5jRNaV6H4yzvRsei3yOWLwBTQ++qTzInDEJqvjBPBn7OzjaORGLl1X+OYZH1VQ8k4nxT0KUXyKxeDfbrqOyvYBR50jF34ejnQRPxJAr4K0eUeHrm58z7jyp+PtYFb0REns3YvG+qTgAlaaPimcyYd4yzA0iV863VlmK4uarjDxXKv5HRAIHpMm2EIunHRvGibJ/MfZ8qfgfWS5dT3RJ8rnqr9A71EnFM5kZ7uF4KDiVWLzGHjnyG84z+pxtXryAL0R6XAZ4hFIxqhux2uSKyWCVOnd2AhEc7SQYHdNCbeYVIxOREp4Ob0kgsXiXazOhVLUy/gtvMfGuDp54KHgZYvyT4OHk+9MM1f7hblR1FOK7ulMWn3Do7zIDD4c+QSxeW/8dXK3LYsWVziLik4NXYIV0/QOfcrk4eCBpRirmTVuCM1UHkddwziInzgMf6XEZJhUn+iU6vQ7HS3dDp9dR8QDwWOTzWDjrcaPutaujN8NbEmiRka5FoauIFCe6x7Xbp9HSV8+ato1ZG3eJ05caJf2XPDRzGZ6e8xKxxtaD8HTyw6Oz1xKL1znYhovyo6xq1Jotu452TlgZNbXHmnODFmHDvO1mK+6XLiNXnEgPPTJLd2NUN0LFA0DCtEfgIBRPefsov0RsSnwddgIR0eNKmpFqVDFhY/m+8SIauqtZ1401m/hQb9NnroR5x+K3SW+Z9AW6vyG5IpJccaLeoU6crfySleMXZhPv6eRLJM5MjwhsSd4JJ5GLybHSYrcQLU50svwzaMeGqfhfdRf45C7RAa7B2Dr/bZPWoscFLkCEL7niRCXN1yBXlICtmE38AOGKjD6SIGTMfwce4slfSZxELlgVvYnYsQxq+3G6cj/YjNnEt/Y1EI/pLvZBxoJ34OscNKntVke/QORWcY9TN/eZrfAg68WXteSZJa6zvTu2Jv/J6MGXCN+5kAXOJ7b/6o5ClLXmge2YTXx9VyXqlOVmiS0WOePF5D9OWDPWXuiItFhykyssWZyIteIBILNsD/F7/T0chGJsTnoT4d5xBj+zMvI5osWJzlZ9if7hbip+InqGlPg8/12zTTa0E4iwMfE1RPsn/d//QjwjkUi4OFFB4yVwBbNPxGgfuItduTvQY6ZHrgK+EOvjX0H8tMW/6kqukZEuTrQHXMIiM3C6Btvxac4Os1V/+OH9LxlIDl4BAEiNeBqeTgSLE8mPoFvdQcVPrV/fg925O3HXTG9Q5IGH1dEvIE22FQtCHicWt6m3Djm3z4JrWHTO3dCICp/lv4NaZanZ9pE4fakZihPpqHjT75da7P/+fZS15DI+Odm1J6xWnIhz4gFApx/D4eKPcP3OBcYmpn3gLv576yS4itWmV+uhR9bNvbhce5xxSfl5/twYFW8uLsqP4lTFPkbNQ8+pP4NmKxcn4rx4AMhrOIcjxf9kxC+sS92OCzVHwHUYs5KmtCUHBwo+sGphoJ/nz2mpeEsiV5Rgb/6fMTQyaJX9FzReRn1XFWwBxq2da+yRY0/eTrM93DFE33AXzlb9G7YCIxdNtvffxa6ctyw6THqy7DNoRoeoeGvTrVbg05wdaOtvNPu+SpqvoUZRDFuC0cukVZpe7MndiTvdNWbbx6C2H6crvoCtwfj18cOjauzNfxc1Heb5RX59c5/Vl2pT8QYY1Wlx8MYHKGn+jmjcyvYClHNg/hxnxQM/DKMeKfkYufVkHpEOjaiQxZH5c5wWf4/TlftxQW76yNo3lQct3mWk4k0kuzYTWeV7p/ycXK4oQVHTFdgyrC1+dL3xAg4VfYQx3eRe79GtVuBoySewdVhd9aq8NQ9fFPzF6KrQKk0vvvj+PQxq+6l4tp9AnbIcn1x7E4098nE/V9VeiL9f+QOUqhZQrFTujDRKVQt25exAiGckpH4J8JYEQCRwwMBwDxSqFpS15KJzsI3a5pr4e9R3VdnM0zWbv9RTqHgKFU+h4ilUvI0zbFC8o52EpoejiEXOVQbFS+xd9TRF3MTZ3rXcoHhPse81miJu4iH2LTQoPtwnbhdNETcJ95GdMihe6hd/EkA9TRPnqJD6xjcZFO/u6K2J8kvcAGCM5oo7RPsnHXC77w1b/9edWyZdl88Dnz6w5kp/nccvWy5d9+GE/XgfSRCWzl7zBoBbNG2spzdl9tMbvZwCRicUDwAp4WvV0f5JSwHU0dyxlgFZ4PzUJWFpZQ+8EhjaakPC9qYY/6RHqHxW0iALSE55du7vbxj6AE+vH3/M5lLtsemX5Zl79NAtp/lkPjzwjzw6e+22JeFrxp1CPKF4AFComnG++vCyyvaCtwDEAaBju8zjUpRf4hvLpc8WGvMCRaPE36NnSInq9iJeraJ0Zpe6I1Kl6YseGlFJAQQC8AcQAMCdOjA7Y452kmaJvWuNp9j3YrhP3HmpX3zFZF6KPCnxFA5182gKqHiKDfE/sqbX2+3JTysAAAAASUVORK5CYII=";
function findRuleBySel(rules, selectorText)
{ if(!rules || !selectorText) return;
for(let i = 0; i<rules.length; i++)
{ const rule = findRuleBySel(rules[i].cssRules, selectorText) || ((rules[i].selectorText === selectorText) && rules[i]);
if(rule) return rule;
}
}
function ID(id) { return document.getElementById(id); }
function MainMenuInit()
{ // подкрутим картинки в css
let est = ID('my_style_id'); // Элемент style
let rules = est.sheet.cssRules; // Список правил
for (let i = 0; i<rules.length; i++) // печатаем на всякий случай все правила
console.log("[" + i + "]: " + rules[i].selectorText + " : " + rules[i].cssRules);
let rule;
rule=findRuleBySel(rules, ".css_l[value=\"1\"]::after"); // ищем правило с нужным селектором
rule.style.setProperty('background-image', `url('${pic_b[3]}')`); // засовываем туда картинку
console.log("1: " + rules + " : " + rule);
console.log(CSSStyleRule);
for (let i = 0; i<rule.length; i++) // не понимаю где искать размер, ищу, где могу, но не получается
console.log("[" + i + "]: " + rule[i].selectorText);
// rule=findRuleBySel(rule, "width"); // и тут искал
// console.log("2: " + rule);
//
// теперь создаем кнопку с этим стилем
let par = document.createElement("button");
par.innerHTML="CH<sub>3</sub>-";
par.className="css_l";
par.value=1;
par.id="rd";
par.title="CH<sub>3</sub>-";
ID("my_div").appendChild(par);
ID("rd").addEventListener('click', RadicalsOnClick);
}
var RDVal=1;
function RadicalsOnClick() { ID("rd").value = RDVal = (RDVal+1)%3; }
MainMenuInit();
</script>
</body></html>