html - 在 html/css 中显示包括颜色的卡片套装

Question

有没有比这样做更简洁(更短)的方式来展示牌套和指定颜色？我做了一些谷歌搜索，但没有找到任何东西。

只是想知道如何让钻石总是红色而不必每次都指定。

(7&spades;-7&clubs;-6<span style="color:#ff0000;">&diams;</span>)

Answer 1

可以在CSS中使用HTML实体，通过data-rank属性传入rank:

.card::before{content:attr(data-rank)}
.spades::after{content:"\2660"}
.hearts::after{content:"\2665";color:red}
.diamonds::after{content:"\2666";color:red}
.clubs::after{content:"\2663"}

<span data-rank="7" class="card spades"></span>
<span data-rank="7" class="card clubs"></span>
<span data-rank="6" class="card diamonds"></span>
<span data-rank="K" class="card hearts"></span>