在當前活動頁面鏈接下添加三角形/在當前頁面上突出顯示當前頁面

我目前正在爲我的tumblr編輯新佈局，並且想知道是否有添加一個像這樣的小三角形的方式：在當前活動頁面鏈接下添加三角形/在當前頁面上突出顯示當前頁面

http://i.imgur.com/e0wP0Qd.png

到流通環節，由目前的平均每點擊該網頁/人目前它會有它的鏈接下一個三角形。

我有一個菜單欄，將有所有的鏈接（可以在這裏看到：http://mains-tester.tumblr.com/），我想做兩件事，使其當前頁面在菜單欄上突出顯示，它有一個它下面的小三角。我試圖弄清楚這是一種只需將三角形添加到每個鏈接而無需去執行每一個鏈接的方法。

來源

2013-03-30 Guchie Gordon Graves

這是很容易地添加這種使用僞類:after效果。

確保position: relative爲<a>標記，您可以添加此CSS，它將在底部居中添加一個白色箭頭。

.linkage:hover:after { 
    width: 0; 
    height: 0; 
    position: absolute; 
    content:""; 
    display:block; 
    /* Ads an arrow effect exploiting the way that browsers join borders together */ 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 
    border-top: 8px solid #fff; 
    /* centers relative to parent */ 
    left: 50%; 
    /* Compensates for width of border (arrow) */ 
    margin-left: -8px; 
}

我設置的在這裏（大部分已使用相同的CSS）的工作演示：http://jsfiddle.net/QybKW/4/

如果你不希望依賴於CSS技巧，你可以創建一個PNG圖像文件並設置僞元素的背景，使其具有正寬度和高度。

來源

2013-03-30 23:44:14

你是上帝派！非常感謝你！但有沒有辦法在當前頁面上保留箭頭/框？ –

歡迎你！ =）我不確定tumblr提供了哪些類，但是如果您可以在用戶在該頁面上時獲得一個''標籤以獲得特定的類，那麼您可以添加另一個CSS匹配，如下所示：'.linkage .open：after'後面的CSS代碼看起來像這樣：'.linkage：hover：after，.linkage.open：after {...}' –

...顯然，open類可以是任何類想要的，或者一個你跌倒的用途是有限的！ =） –

在當前活動頁面鏈接下添加三角形/在當前頁面上突出顯示當前頁面

回答

相關問題