versión css:
:root { --kiss: url(https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f609.svg); --wink: url(https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f617.svg); } [class*="emo_"]:after { display: block; content:''; width:40px; height:40px; border:1px solid red; border-radius:50% } .emo_wink:after { content: var(--wink); } .emo_kiss:after { content: var(--kiss); } <div class="emo_wink"></div> <div class="emo_kiss"></div>Versión js: quiero usar la versión js para evitar códigos repetitivos en css pero tengo problemas para que funcione... Puedo ver en la consola que los estilos se agregan pero no se renderiza...
var emodata = { wink: '1f609', kiss: '1f617' } function emojis(data) { for (var key in data) { if (data.hasOwnProperty(key)) { var url = 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/' + data[key] + '.svg'; document.documentElement.style.setProperty('--' + key, 'url(' + url + ')'); document.styleSheets[0].insertRule(".emo_" + key + ":after { content: var(--" + key + ") }"); } } } emojis(emodata) [class*="emo_"]:after { display: block; content:''; width:40px; height:40px; border:1px solid red; border-radius:50% } <div class="emo_wink"></div> <div class="emo_kiss"></div>Puede crear un elemento de estilo en javascript y agregarlo al elemento principal y luego agregar las clases en consecuencia.
var emodata = { wink: '1f609', kiss: '1f617' } function emojis(data) { var style = document.createElement('style'); style.type = 'text/css'; document.querySelector('head').appendChild(style) for (var key in data) { if (data.hasOwnProperty(key)) { var url = 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/' + data[key] + '.svg'; document.documentElement.style.setProperty('--' + key, 'url(' + url + ')'); style.innerHTML+=`.emo_${key}:after{ content: var(--${key}); }` } } } emojis(emodata) [class*="emo_"]:after { display: block; content:''; width:40px; height:40px; border:1px solid red; border-radius:50% } <div class="emo_wink"></div> <div class="emo_kiss"></div>También podrías usar sass para hacerlo sin javascript