css - CSS Nav 要素のホバーと下の境界線

Question

次の効果を再現しようとしています: http://amplifiedvideodesign.com/capture.png

ホバーの背景色を設定できますが、下部にある境界線と小さな矢印をどのように行うことができますか?

ありがとう。

Answer 1

境界線については、境界線を設定してその色を更新するだけで同じコードを使用できます。jsFiddle で私の例を試すことができます

.tabs a:hover {
    background-color: #444;
    border-bottom-color: #484;
    color: #484;
}

矢印/菱形/三角形については、簡単には設定できませんが、最も簡単な解決策は、プレーンな HTML/CSS を使用するのではなく、背景を追加することです。

更新:これはアニメーションの例です。