CSS在網頁設計中使用廣泛，其中一項常見的需求是展示價格并按價格進行排序。在這種情況下，我們經常需要添加一個上下箭頭來幫助用戶直觀地了解價格的排序情況。

實現這個功能的方法是使用CSS偽元素和transform屬性，代碼如下：

.price-header:after {
content: "";
display: inline-block;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #000;
margin-left: 5px;
transform: rotate(180deg);
}
.price-header.sorted-asc:after {
border-bottom-color: #000;
border-top-color: transparent;
transform: rotate(0deg);
}
.price-header.sorted-desc:after {
border-top-color: #000;
border-bottom-color: transparent;
transform: rotate(0deg);
}

這段代碼創建了一個偽元素，在元素的右側添加了一個小三角形，并使用transform屬性進行旋轉。其中，sorted-asc和sorted-desc類用于控制箭頭的方向，可以根據需求動態添加。

在HTML中，則將排序的標簽添加.price-header類，并根據排序情況添加相應的排序類，例如.sorted-asc或.sorted-desc。例如：

<div class="price-header sorted-desc">
<span class="price">$9.99</span>
<span class="name">Product A</span>
</div>

這樣，就可以輕松地為價格添加上下箭頭的排序功能，并幫助用戶更方便地瀏覽商品列表。