Stupid box-shadow pixelized icons

dabblet.css

/* Stupid box-shadow pixelized icons */
a {
	color: blue;
	padding-right: 1px;
	}
a:hover {
	color: red;
	}
a:after {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1px;
	margin: 0 0 0 10px;
	
	box-shadow:
		-10px 2px currentColor,
		-9px  1px currentColor,
		-8px  0   currentColor,
		-7px -1px currentColor,
		-6px -2px currentColor,
		-5px -3px currentColor,
		-4px -4px currentColor,
		-3px -5px currentColor,
		-2px -6px currentColor,
		-1px -7px currentColor,
		-0px -8px currentColor,
		-1px -8px currentColor,
		-2px -8px currentColor,
		-3px -8px currentColor,
		-4px -8px currentColor,
		 0   -7px currentColor,
		 0   -6px currentColor,
		 0   -5px currentColor,
		 0   -4px currentColor;
	}

dabblet.html

<h1>Pixelized icons using box-shadow</h1>
<p>Works in Chrome, Firefox, Opera. In Safari there is no currentColor for box-shadow :(</p>

<a href="#">Hello! Hover me</a>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}