關于CSS3 before 箭頭的文章

/*創建一個箭頭*/
.arrow:before{
content: "";
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid black;
position: absolute;
left: -10px;
top: 50%;
margin-top: -10px;
}

CSS3 before 箭頭是常用于裝飾性的箭頭效果實現方法。使用:before可以為元素創建一個偽元素，利用這個偽元素可以實現各種各樣的裝飾效果，包括箭頭，標題等等。

在上述代碼中，我們創建了一個.arrow的元素，在其:before偽元素中實現箭頭樣式。通過content屬性為空值，我們創建了一個空偽元素。接下來，我們為箭頭的上、下部分和右側添加了邊框，并進行了樣式調整，使箭頭居中。最后我們為箭頭通過定位定好位置。通過left、top和margin-top屬性，我們在元素左側創建了一個黑色箭頭。

需要注意，當我們將偽元素的定位屬性設置為absolute時，其父元素需要設置定位屬性，否則將定位到頁面最頂端。

總而言之，CSS3 before 箭頭是一個非常常見的頁面效果，通過:before偽元素的結合，我們可以輕易地實現各種箭頭和其他裝飾效果的展示。