使用 CSS 的 :before 和 :after 選擇器做一個箭頭樣式

對於 :before 和 :after 選擇器，大家並不陌生，但是很少有人會主動去用它們。先解釋下它們的定義和用法：

:before 選擇器在被選元素的內容前面插入內容，:after 選擇器在被選元素的內容后面插入內容，都會使用 content 屬性來指定要插入的內容。

有時候，項目中或多或少需要一些箭頭，如果用圖片來做，感覺就有點 low 了，而上面這兩個選擇器是最好的選擇。效果如下：

html 代碼如下：

<div class="test"></div>

 

css 代碼如下：

.test {
    position: relative;
    width: 120px;
    height: 40px;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
}
.test:after {
    position: absolute;
    right: 15px;
    top: 18px;
    width: 0;
    height: 0;
    content: "";
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #fff transparent;
    -webkit-transition: all .25s;
       -moz-transition: all .25s;
        -ms-transition: all .25s;
         -o-transition: all .25s;
            transition: all .25s;
}

.test:before {
    position: absolute;
    right: 13px;
    top: 18px;
    width: 0;
    height: 0;
    content: "";
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: #d36969 transparent;
    -webkit-transition: transform .25s;
       -moz-transition: transform .25s;
        -ms-transition: transform .25s;
         -o-transition: transform .25s;
            transition: transform .25s;
}
.test.active:after{       
    top: 20px;
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg); 
}
.test.active:before{
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);        
}

通過 :before 和 :after 兩個偽元素，設置 content 為空，寬高為零，邊框和顏色，生成兩個等邊三角形，一個是紅色的三角，其邊長稍大，一個是白色的三角。會有人問為什么白色三角是通過 :after 生成的，因為 :after 生成的白色三角才能覆蓋在 :before 生成的紅色三角，而形成一個箭頭(一定要設置好定位的 top 值，使兩個三角的底邊重合)。

 

js 代碼如下：

$('.test').on('click',function(){
      $(this).toggleClass('active');
})

點擊的時候箭頭會旋轉180度，效果如下：