CODEWITHSUNDEEP
htmlcss
bkp
bkp

Reputation: 26

Show card suits including color in html / css

Is there a cleaner (shorter) way to display card suits and specify colors than doing this? I did some google searches and didn't find anything.

Just wondering how to make the diamonds always red without having to specify it each time.

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

Upvotes: 0

Views: 1261

Answers (2)

symlink
symlink

Reputation: 12208

You can use HTML entities in CSS, and pass the rank in by the data-rank attribute:

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

Upvotes: 2

Ori Drori
Ori Drori

Reputation: 193057

It's not shorter, but at least to my taste, it's more expressive, and easier to use.

I would create a list of classes that includes all suits, and use a pseudo-element (::after) to add the icon, and the color. Now you just have to set the class, and add a number, and you'll get the icon with the correct color.

i.clubs, i.diamonds, i.hearts, i.spades {
  font-style: normal;
}

i.clubs::after {
  content: '♣';
}

i.diamonds::after {
  content: '♦';
}

i.hearts::after {
  content: '♥';
}

i.spades::after {
  content: '♠';
}

i.diamonds::after, i.hearts::after {
  color:#ff0000;
}
(7&spades;-7&clubs;-6<span style="color:#ff0000;">&diams;</span>)

<br>

(<i class="spades">7</i><i class="clubs">-7</i><i class="diamonds">-6</i>)

Upvotes: 1

Related Questions