在新浪微博中，箭頭icon是常見的UI元素，它可以用來表示下拉菜單、彈窗、消息提示等。而這些箭頭icon的實現方式，就是通過CSS的:before和:after偽元素添加樣式制作而成的。

.icon-arrow {
position: relative;
display: inline-block;
width: 10px;
height: 10px;
}
.icon-arrow:before,
.icon-arrow:after {
content: "";
display: block;
position: absolute;
width: 0px;
height: 0px;
border-style: solid;
}
.icon-arrow.up:before {
top: 4px;
border-color: transparent transparent #666 transparent;
border-width: 0px 4.5px 4.5px 4.5px;
}
.icon-arrow.up:after {
top: -3.5px;
border-color: transparent transparent #fff transparent;
border-width: 0px 4px 4px 4px;
}
.icon-arrow.down:before {
top: -3px;
border-color: #666 transparent transparent transparent;
border-width: 4.5px 4.5px 0px 4.5px;
}
.icon-arrow.down:after {
top: 3.5px;
border-color: #fff transparent transparent transparent;
border-width: 4px 4px 0px 4px;
}

上面的代碼中，.icon-arrow是箭頭的容器，通過:before和:after添加樣式來制作箭頭形狀。其中，設置寬高為0是因為我們采用了CSS的三角形原理，即用border設置三角形邊框的樣式，同時把容器的高寬設置為0，這樣就可以只顯示邊框，而不顯示三角形以外的部分。

在箭頭icon的應用中，還可以根據不同的場景和需求，進行不同位置的設置和樣式調整，例如上下左右四個方向的不同處理、大小等等。