[thomasfoster96]

Each of these cards could probably be made with one element and some CSS3 pseudo-element selectors, as opposed to the four elements (wrapper element and three child elements) that are currently used per card.

Additionally, with three elements (possible just one if you're crazily good at CSS), it'd be possible to have flippable cards. Still just using CSS3.

Edit: Can someone explain these downvotes for me?

[pakastin]

I suck at pseudo-elements – that's why.. :)

[pauly]

Great work, I love this. Here is a quick playing card example with pseudo elemenets view-source:http://www.clarkeology.com/card.html

[indubitably]

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

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

Or something?

[femto113]

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.

[pakastin]

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

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

[pauly]

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

[esprehn]

Browsers implement pseudo elements using actual elements internally, there's no difference in power from using ::before or just putting a <span> as a child. Pseudo elements will probably be a little bit slower though.

[pakastin]

I agree. Some people rant about me using "value | 0" instead of "Math.floor(value)" and another would do "::before {content: attr(data-value..." -stuff instead of just using a good old elements..

Go figure :)