transition link experiment

by Richard Hunter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="home-container"> <span class="icon">
        <i class="fa fa-home"></i>
        <span class="text">dfddf</span>
</span> <span class="arrow"><i class="fa fa-arrow-right"></i></span>

</div>
<div class="container"> <span class="alpha">alpha </span>
 <span class="beta"><i class="fa fa-arrow-right"></i></span>

</div>
<div class="foo-container"> 
    <span class="icon">
        <i class="fa fa-home"></i>
       
    </span>  <span class="text">dfddf</span>
 <span class="arrow"><i class="fa fa-arrow-right"></i></span>

</div>

SCSS

* { box-sizing : border-box; }
.home-container {
    
    
    width : 300px;
    border : solid 1px black;
    margin-bottom : 1px;
    display : flex;
    justify-content : space-between;
    background : #ccc;
    .icon {
        display : flex;
       
        padding : 12px;
        align-self : center;
        .fa-home {
            
            
        }
        .text {
            font-size : 20px;
            padding-left : 12px;
            font-family : arial;
            align-self : center;
        }
        .fa:before {
            font-size : 40px;
        }
    }
    .arrow {
        align-self : center;
        font-size : 40px;
        padding-right : 12px;
    }
    
}

.container {
    width : 300px;
    height : 50px;
    border : solid 1px black;
    display : flex;
    justify-content : space-between;
    flex-direction : row;
    font-size : 20px;
    text-transform : uppercase;
    font-family : arial;
    span {
        display : inline-block;
    }
    span.alpha {
        transition : 0.3s linear all;
        align-self : center;
        padding-left : 12px;
    }
    span.beta {
        transition : 0.3s linear all;
        align-self : center;
        padding-right : 100%;
        opacity : 0;
    }
    &:hover {
        span.alpha {
            font-size : 30px;
        }
        span.beta {
            padding-right : 20px;
            opacity : 1;
        }
        & .fa {
            &:before {
                font-size : 30px;
            }
        }
    }
        margin-bottom : 1px;
}

.foo-container {
    width : 300px;
    
    border : solid 1px black;
    margin-bottom : 1px;
    background : #ccc;
    .icon {
        background : white;
        width : 20%;
        display : inline-block;
        font-size : 43px;
        padding : 10px;
        vertical-align : middle;
        text-align : center;
        border-right : solid 1px #777;
    }
    .text {
        
        display : inline-block;
        width : 57%;
     ...