4 ms·
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
by pak 16y ago
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.
- necolas 16y agoAs 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-with-css2/ http://nicolasgallagher.com/multiple-backgrounds-and-borders...
- pak 16y agoEh, 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.
- bgrins 16y agoI 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.