css3给::after添加hover伪类 before同理

<div></div>

div {
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #ccc;
 
}
div::after {
    content:"";
    position:absolute;
    top:50px;
    right:-5px;
    border-left:5px solid #ccc;
    border-top:5px solid  transparent;
    border-bottom:5px solid transparent;
}
div:hover::after {
    border-left:5px solid red;
}
div:hover {
    background-color:red;
}