responsive icon

by Richard Hunter

HTML

<div class="foo">
    @
</div>

SCSS

.foo {
    font-size : 30px;
    padding : 1em;
    color : white;
    display : inline-block;
    border : solid 1px cornflowerblue;
    border-radius : 0.5em;
    width : 1em;
    height : 1em;
    font-weight : bold;
    text-align : center;
    position : relative;
    line-height : 1;  // vertically center character
    
    &:before {
        
            content : "";
            background : yellow;
            position : absolute;
            width : 100%;
            height : 100%;
            left : 0;
            top : 0;
            z-index : -1;
            border-radius : 0.5em;
    }
    
    &:after {
        
            content : "";
            background : blue;
            border-radius : 50%;
            padding : 1em;
            position : absolute;
            
            // top, left, and margin for centering circle
            top : 50%;
            left : 50%;
            margin : -1em;
            
            z-index : -1; // push behind character
    }
}