CSS pencil

Pencil icon with pseudo-elements

by otinanaipali

HTML

<div>
<a href="#">
<img border="0" alt="edit" src="http://www.dieselloverde.com/SugarCRM/themes/Sugar/images/edit_inline.gif" />
</a>

</div>

CSS

div {
    width:50px;
    height:50px;
    background:#efefef
}
div a {
    display:block;
    width:20px;
    height:20px;
    position:relative;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #ccc;
    transform:rotate(45deg) translate3d(0, 0, 0);
}
div a:before {
    content:"";
    display:block;
    width:4px;
    height:4px;
    position:absolute;
    left:9px;
    bottom:2px;
    background:#666;
    transform:rotate(45deg) translate3d(0, 0, 0);
}
div a:after {
    content:"";
    display:block;
    position:absolute;
    width:12px;
    height:4px;
    border:1px solid #666;
    box-shadow:inset -4px 0 0 #666;
    left:6px;
    top:6px;
    transform:rotate(-90deg) translate3d(0, 0, 0);
    zoom:1;
    background:#fff;
    margin-left:-2px
}
div a img {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    opacity:0;
}