SCSS trashcan

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

by Allen N.

HTML

Delete icon<div class="trashcan"></div>

SCSS

$button-bg-color: 3;
$button-bg-color: 3;
$trashcan-color: #F0F0F0;
$trashcan-color-hover: #FF7777;

html, 
body {
    color: #F0F0F0;
    background: #010101;
    font-family: Helvetica, Arial;
}
.trashcan {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 25px;
    height: 36px;
    margin: -4px 0 0 0;
    padding-top: 12px;
    padding-bottom: 21px;
    padding-right: 5px;
    padding-left: 5px;
    border: none;
    box-sizing: border-box;
    border-radius: 0;
    background-clip: content-box;
    background-color: $trashcan-color;
    vertical-align: middle;
    transition: all 300ms;
    font-size: 0;

    &:before {
        position: absolute;
        top: 12px;
        left: 7px;
        width: 7px;
        height: 10px;
        border: 2px solid $trashcan-color;
        transition: all 300ms;
        content: '';
    }
    &:after {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 1px;
        height: 12px;
        border: 2px solid $trashcan-color;
        transition: all 300ms;
        content: '';
    }
    &:hover {
        background-color: $trashcan-color-hover;

        &:before {
            border-color: $trashcan-color-hover;
        }
        &:after {
            border-color: $trashcan-color-hover;
        }
    }
}