Use pseudo elements for hover indicator arrows

.myElement{
 /* ( For pseudo-element to display next to element)*/
 display: inline-block;
}

.myElement::before {
 /* ( for off state)*/
 display: none;
 /*( pseudo-elements wont show without this)*/
 content: '';

 /*( w & h are zero to use border thickness for construction )*/
 width: 0; 
 height: 0;
 border-left: 10px solid transparent;
 border-top: 10px solid red;
 border-right: 10px solid transparent;

 /*(Pos: Absolute to prevent "hover kick" of shifting inline elements)*/
 position: absolute;
 top: 0;
 left: -10px;
}

.myElement:hover::before{
 display: inline-block;
}

Related protips

Have a fresh tip? Share with Coderwall community!