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

Question

有没有比这样做更简洁（更短）的方式来展示卡片套装并指定颜色？我做了一些谷歌搜索并没有找到任何东西。

只是想知道如何使钻石始终为红色，而不必每次都指定它。

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

标签： htmlcss

Answer 1

data-rank您可以在 CSS 中使用 HTML 实体，并通过属性传递排名：

.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>