JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<ul class="glyphs"> 
	<li class="one">Пики</li>
	<li class="two">Крести</li> 
	<li class="three red">Черви</li> 
	<li class="four red">Ромбик *</li> 
</ul>
<small>* бубей
</small>

CSS

.glyphs {
  list-style-type: none;
}

.glyphs li:before,
.glyphs b {
  display: inline-block;
  width: 1.5em;
  font-size: 1.5em;
  text-align: center;
}

.one {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♠'+this.innerHTML);
}
.one:before {
        content: "\2660"; /* ♠ */
}
.two {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♣'+this.innerHTML);
}
.two:before {
        content: "\2663"; /* ♣ */
}
.three {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♥'+this.innerHTML);
}
.three:before {
        content: "\2665"; /* ♥ */
}
.four {
        background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '♦'+this.innerHTML);
}
.four:before {
        content: "\2666"; /* ♦ */
} 

.red b,
.red:before {
  color: red;
}