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>

这样，就可以轻松地为价格添加上下箭头的排序功能，并帮助用户更方便地浏览商品列表。