Pure CSS down & right chevrons with adjustable border widths

The simplest & most flexible code for creating pure CSS chevrons. Includes Hover state for use with links.

HTML

<div class="chevron right">
  <a href="#" style="background-color: white;"></a>
</div>

<div style="height: 1em;">
</div>

<div class="chevron bottom">
  <a href="#" style="background-color: white;"></a>
</div>

CSS

/* Primary Element */   
   .chevron a:before {
     border-style: solid;
     border-width: 0.1em 0.1em 0 0;     /* Line thickness */
     content: '';
     display: inline-block;
     height: 5em;     /* Arrow size; Height & Width must remain equal */
     width: 5em;
     left: 0.15em;
     position: relative;
     transform: rotate(-45deg);     
     color: #808080;
   }
   
   /* Hover State */   
   .chevron a:hover:before {
     content: '';
     font-weight: bold;
     color: black;
   }      
   
   /* Right Arrow */   
   .chevron.right a:before {
     left: 0;
     transform: rotate(45deg);    
   }
   
   /* Down Arrow */   
   .chevron.bottom a:before {
     top: 0;
     transform: rotate(0);
     /* To position at top of element, compensate for rotation with margin-top: -2.5em; */
   }