Internet Explorer Css переменное содержимое динамически

Question

Пожалуйста, я пытаюсь сделать содержимое псевдокласса элемента динамически, он прекрасно работает (Google Chrome, Firefox, Safari).

Css:

.list-rank > li:before{
    content: var(--rank ,'0')
}

HTML

for (var i = 0; i <res.data.rankListUser.length; i++) {
  html +='<li style="--rank:\''+res.data.rankListUser[i].rank+'\'" >';
  html +='name here'
  html +='</li>';
} 
$('#ranking_container').html(html);

Answer 1

IE не поддерживает переменные CSS, подобные этим, но вы потенциально можете использовать атрибут data:

div:before { content: attr(data-word); }

<div data-word="Hello">World</div>

Это будет только работать со свойством content, однако - его нельзя использовать для установки цветов и т. Д.в настоящее время это не означает, что для IE это, вероятно, никогда.Согласно MDN это поддерживается в IE: https://developer.mozilla.org/en-US/docs/Web/CSS/attr