CSS pencil edit icon

CSS only pencil using one <div>. Also works in IE11

by Allen N.

HTML

Edit icon<div class="edit-pencil"></div>

SCSS

$bg-color: #010101;
$font-color: #F0F0F0;
$pencil-color-hover: #77FF77;

html, 
body {
    color: $font-color;
    background: $bg-color;
    font-family: Helvetica, Arial;
}

.edit-pencil {
	position: relative;
	display: inline-block;
	width: 25px;
	height: 36px;
  margin-top: -4px;
  padding: 0 7px;
	font-size: 0;
	vertical-align: middle;
	cursor: pointer;
}
.edit-pencil:before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-2px, -3px) rotate(-45deg);
	width: 3px;
	height: 5px;
	background-color: $font-color;
	box-shadow: 1px 0px 0px $font-color, 2px 0px 0px $font-color, 3px 0px 0px $font-color, -1px 0px 0px $font-color, -2px 0px 0px $font-color, -3px 0px 0px $font-color, -3.3px 0px 0px $font-color, 7px 0px 0px $font-color;
	transition: all 300ms;
	content: '';
}
.edit-pencil:after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-9px, 3px) rotate(-45deg);
	font-size: 1px;
	border: solid 3em transparent;
	border-left-width: 0;
	border-right-width: 5em;
	border-right-color: $font-color;
	transition: all 300ms;
	content: '';
}
.edit-pencil:hover:before {
	background-color: $pencil-color-hover;
	box-shadow: 1px 0px 0px $pencil-color-hover, 2px 0px 0px $pencil-color-hover, 3px 0px 0px $pencil-color-hover, -1px 0px 0px $pencil-color-hover, -2px 0px 0px $pencil-color-hover, -3px 0px 0px $pencil-color-hover, -3.3px 0px 0px $pencil-color-hover, 7px 0px 0px $pencil-color-hover;
}
.edit-pencil:hover:after {
	border-right-color: $pencil-color-hover;
}