That’s nice CSS but the HTML is so borked… why not

<div class=card data-value="A" data-suit="︎">︎</div>

Or something?

On the "least amount of HTML possible" theme here's a version using only "class", e.g.

<p class="2 ︎"/>

http://codepen.io/femto113/pen/avzWJq

Doesn't include the card centers, but does have top and bottom corners.

EDIT: HN doesn't seem to like unicode characters? The class should include the suit symbol.

I think I'll stick with good old elements :)

Thanks anyway, and I really appreciate true CSS ::-wizards, don't get me wrong.. ;)

I did have that originally, but <card /> worked in my browser so i ran with it... I'm sure card[suit=$] with a unicode character is not super widely supported css anyway...