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

如果你有一個帶箭頭的鏈接或按鈕，這將是一個非常有用的技術，可以使你的網站更加優雅和易于使用。