在CSS中使用CSS在當前頁面下添加小箭頭

Question

我有一個菜單，其中一個用於默認狀態，另一個用於懸停/活動狀態。當前頁面就像懸停/活動狀態，但在其下方有一個箭頭。我無法弄清楚讓箭頭出現的最佳方式。我嘗試了一個邊框圖像，但由於按鈕大小根據菜單項的長度而有所不同，所以看起來並不正確。這裏是我用來創建兩種不同風格的當前CSS：

.main-nav li a { 
    float: left; 
    font-size: 15px; 
    color: #333; 
    padding: 10px 15px; 
    text-shadow: 1px 1px #DDD; 
    border-right: 1px solid rgba(0, 0, 0, .3); 
    border-left: 1px solid rgba(255, 255, 255, .5); 
    background-image: -webkit-gradient(
     linear, 
     left top, 
     left bottom, 
     color-stop(0.0, #B3D09E), 
     color-stop(0.75, #A0B88E) 
    ); 
    background-image: -o-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%); 
    background-image: -moz-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%); 
    background-image: -webkit-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%); 
    background-image: -ms-linear-gradient(bottom, #B3D09E 0%, #A0B88E 75%); 
    background-image: linear-gradient(to bottom, #B3D09E 0%, #A0B88E 75%); 
    transition: all 300ms; 
    -moz-transition: all 300ms; 
    -o-transition: all 300ms; 
    -webkit-transition: all 300ms; 
} 
.main-nav .current-menu-item a, .main-nav .current-page-ancestor a, .main-nav li a:hover { 
    color: #FFF; 
    background-image: -webkit-gradient(
     linear, 
     left top, 
     left bottom, 
     color-stop(0, #043420), 
     color-stop(1, #075A36) 
    ); 
    text-shadow: none; 
    background-image: -o-linear-gradient(bottom, #043420 0%, #075A36 100%); 
    background-image: -moz-linear-gradient(bottom, #043420 0%, #075A36 100%); 
    background-image: -webkit-linear-gradient(bottom, #043420 0%, #075A36 100%); 
    background-image: -ms-linear-gradient(bottom, #043420 0%, #075A36 100%); 
    background-image: linear-gradient(to bottom, #043420 0%, #075A36 100%); 
} 

我想避免使用jquery，如果可以的話。我覺得應該有一些方法來使用CSS而不是使用jQuery來將圖像放在按鈕的中心。我是否在每個按鈕下放置一個不可見的div，並將箭頭圖像居中並顯示在當前頁面上？

這就是我給我的菜單所遵循的。他們沒有使用相當正確的術語。圖像的「活動」部分是當前頁面樣式：

Answer 1

您可以在CSS中使用僞元素來添加內容，如::after。通過使用具有不同寬度和顏色的邊框屬性，可以獲得三角形形狀。唯一可能有點棘手的是如果你需要漸變繼續到箭頭。

我放了一個小演示。將鏈接懸停在菜單中以查看箭頭。

DEMO

li:hover::after { 
    content: ' '; 
    position: absolute; 
    border: solid 10px transparent; 
    border-top: solid 0px transparent; 
    border-width: 10px; 
    left: 50%; 
    margin-left: -10px; 
    border-color: #222 transparent transparent transparent; 
}