在CSS中添加一个箭头动画可以使你的网站更加炫酷并引起用户的注意。在这里，我们将讨论如何在hover状态下添加箭头。

.arrow {
position: relative;
display: inline-block;
}
.arrow::after {
content: ' ';
display: block;
position: absolute;
left: -5px;
top: 50%;
width: 0; 
height: 0; 
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid black;
transform: translate(0, -50%);
transition: all 0.4s;
opacity: 0;
}
.arrow:hover::after {
left: 100%;
opacity: 1;
}

代码解释：

首先，我们需要给带有箭头的元素添加一个父级元素，并将其设置为relative定位，以便在其上设置伪元素。

.arrow {
position: relative;
display: inline-block;
}

接下来，我们使用伪元素‘::after’来创建箭头。我们调整它的位置和样式，以使其看起来像一个指向右边的箭头。我们还将opacity属性设置为0，以使其在hover状态下慢慢出现。

.arrow::after {
content: ' ';
display: block;
position: absolute;
left: -5px;
top: 50%;
width: 0; 
height: 0; 
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid black;
transform: translate(0, -50%);
transition: all 0.4s;
opacity: 0;
}

最后，我们使用:hover伪类来控制箭头的出现。我们将箭头向右移动，并将其opacity属性设置为1，以实现hover时箭头的出现效果。

.arrow:hover::after {
left: 100%;
opacity: 1;
}

如果你有一个带箭头的链接或按钮，这将是一个非常有用的技术，可以使你的网站更加优雅和易于使用。