Hover box with arrow - after before

Html code

div id='rectangel' /div

CSS code

#rectangel{ height:40px; width:100px; background:red; } #rectangel:hover{background:blue;} #rectangel:hover:after{border-top-color: blue;} #rectangel:after{ content: ""; height:0; position: absolute; width: 0; margin-top:40px; margin-left:40px; border: 10px solid transparent; border-top-color: red; }