Error: Custom_Breadscrumb line 38, column 20: The reference to entity ":after" must end with the ';' delimiter	
Error	Error: The reference to entity ":after" must end with the ';' delimiter.

<apex:page >

<style type="text/css">
       $crumbs-back:#F3F5FA;
$text-color:#8093A7;


body {
    margin: 100px auto;
    font-family: Helvetica;
    background: #FFF;
}

#crumbs {
    text-align: center;
   
ul {
        list-style: none;
        display: inline-table;
        li {
            display: inline;
            
            a {
            display: block;
            float: left;
            height: 50px;
            background: #F3F5FA;
        
            text-align: center;
            padding: 30px 20px 0 60px;
            position: relative;
            margin: 0 10px 0 0; 
            
            font-size: 20px;
            text-decoration: none;
            color: $text-color;
        
            &:after {
                content: "";  
                border-top: 40px solid transparent;
                border-bottom: 40px solid transparent;
                border-left: 40px solid #F3F5FA;
                position: absolute; 
                right: -40px;
                top: 0;
                z-index: 1;
            }
            &:before {
                content: "";  
                border-top: 40px solid transparent;
                border-bottom: 40px solid transparent;
                border-left: 40px solid #fff;
                position: absolute; 
                left: 0; 
                top: 0;
            } 
            
        }
        }
    }
}




        
    
                #crumbs ul li:first-child a {
                    border-top-left-radius: 10px; border-bottom-left-radius: 10px;
                }
                #crumbs ul li:first-child a:before {
                    display: none; 
                }
                
                #crumbs ul li:last-child a {
                    padding-right: 40px;
                    border-top-right-radius: 10px; border-bottom-right-radius: 10px;
                }
                #crumbs ul li:last-child a:after {
                    display: none; 
                }
            
            #crumbs ul li a:hover {
                background: #357DFD;
        color:#fff;
            }
                #crumbs ul li a:hover:after {
                    border-left-color: #357DFD;
           color:#fff;
                }
        
    </style>
 <div id="crumbs">
  <h1>Breadcrumbs</h1>
    <ul>
        <li><a href="#1" ><i class="fa fa-home" aria-hidden="true"></i></a></li>
        <li><a href="#2" ><i class="fa fa-shopping-bag" aria-hidden="true"></i> Shop</a></li>
        <li><a href="#3" ><i class="fa fa-cart-plus" aria-hidden="true"></i> Cart</a></li>
        <li><a href="#4" ><i class="fa fa-credit-card-alt" aria-hidden="true"></i> Checkout</a></li>
        
    </ul>
</div>
</apex:page>