hover效果经过 after伪类时写法

<div>测试</div>

添加伪元素 ,伪元素不能直接hover,可以给父元素div添加hover效果,然后改变伪元素样式

写法:  元素:hover::after{ 样式 }

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;
}