伪元素的使用

伪元素不能跟着hover，要这样用
.box:hover::before
position: absolute 自动把元素转换为块元素。

例子：

<div class="box"></div>
<style>
.box {
width: 500px;
height: 30px;
position: relative;
border: 1px solid #cccccc

}
.box::before {
content: "";
position: absolute;
width: 15px;
height: 15px;
right: 5px;
top: 5px;
border-right: 1px solid red;
border-bottom: 1px solid red;
box-sizing: border-box;
transform: rotate(45deg);
}

.box:hover::before {
transform: rotate(225deg);
transition: all 0.3s;
}
</style>