Hacker News new | past | comments | ask | show | jobs | submit login

Ugh, too clever for my taste. I would hate to edit icons that are a mish-mash of CSS backgrounds, rotated boxes, and border-radius'ed edges, and to boot, based entirely on pseudo-elements. (Current web dev tools like Web Inspector in Chrome/Safari, etc. aren't well built for examining pseudo-elements.) This CSS uses ~3-4 pseudo-elements per icon. It's clever for doing that to preserve the markup and avoiding JS, but it's hard to understand. Maybe it would help to comment the CSS so designers can see that "this is the handle of the trash can, this is the left side of the heart," etc., since :after and :before are hacked far beyond having any semantic meaning.

As pseudo-elements, :before and :after don't have any real semantic meaning. But yes, it is a complete abuse of pseudo-elements that isn't immediately understandable. There are some more practical and simple pseudo-element hacks too - http://nicolasgallagher.com/multiple-backgrounds-and-borders...

Eh, some pseudo-elements have semantic meaning. My best example of this would be :link, which distinguishes between hyperlinks and bare anchors. I would typically associate :before with styling that happens visually before an element, and :after the opposite, but they have been both used here to provide for an icon before the element.

:link is a pseudo-class, not a pseudo-element

I stand corrected!

I have noticed that recently the Chrome web inspector has gotten much better at working with pseudo classes. Maybe it is just the nightly version of Chrome, but when I inspect one of those links, I can see and edit the a:before pseudo class.

It's a really nice upgrade, because in the current version of Firebug and older versions of the Chrome inspector it was not possible to modify or even see these properties.

Applications are open for YC Summer 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact