JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="plus"></a>
<a href="#" class="min"></a>

<div style="font-size: 2em">
<a href="#" class="plus"></a>
<a href="#" class="min"></a>
</div>

SCSS

$base-font-size: 16px;

@function px2em($px, $contextPXSize : $base-font-size ){
    @return ( $px / $contextPXSize ) * 1em;
}

a.min {
    position: relative;
    display: block;
    margin: 2em;
    width: px2em(22px); height: px2em(22px);
    background: rgba(0,0,0,.1);
    border: 1px solid #000;
    border-radius: px2em(5px);
    
    
    &:after, &:before {
        content: "";
        position: absolute;
        background: black;
        left: 50%; top: 50%;   
    }
    /*&:after {
        height: px2em(18px); width: px2em(4px);
        margin: px2em(-9px) 0 0 px2em(-2px);        
    }*/
    &:before {
        height: px2em(4px); width: px2em(18px);
        margin: px2em(-2px) 0 0 px2em(-9px); 
    }
    /*&:hover:after {
        display: none;        
    } */
}
a.plus {
    position: relative;
    display: block;
    margin: 2em;
    width: px2em(22px); height: px2em(22px);
    background: rgba(0,0,0,.1);
    border: 1px solid #000;
    border-radius: px2em(5px);
    
    
    &:after, &:before {
        content: "";
        position: absolute;
        background: black;
        left: 50%; top: 50%;   
    }
    &:after {
        height: px2em(18px); width: px2em(4px);
        margin: px2em(-9px) 0 0 px2em(-2px);        
    }
    &:before {
        height: px2em(4px); width: px2em(18px);
        margin: px2em(-2px) 0 0 px2em(-9px); 
    }
    &:hover:after {
        display: none;        
    } 
}