CSS3のセンタートライアングル（ホバー上）HTML

Question

私は上にカーソルを置くと、各ナビゲーションアイテムの中央にCSSの三角形を中央に配置しようとしています。現時点では、三角形は各項目の先頭文字の下にあります。私はこれをどのようにして行うのですか？

私がposition：absoluteを削除すると、三角形が削除されます。どうすればこの問題を解決できますか？

.current { 
 
    color: #FFF; 
 
    text-decoration: underline; 
 
} 
 

 
nav a:hover:after { 
 
    content: ""; 
 
    display: block; 
 
    border: 8px solid #405580; 
 
    border-bottom-color: #fff; 
 
    position: absolute; 
 
    bottom: 0px; 
 
}

<header> 
 
    <a href="#" id="logo"></a> 
 
    <nav> 
 
    <a href="#" id="menu-icon"></a> 
 
    <ul> 
 
     <li><a href="#" class="current">Home</a></li> 
 
     <li><a href="#">A</a></li> 
 
     <li><a href="#">B</a></li> 
 
     <li><a href="#">C</a></li> 
 
     <li><a href="#">D</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

あなたの<a>相対して、あなたのnav a :hover :afterrelativeを作る作ってみることができます。私は矢印を押し下げるためにmargin-topを追加しました。それを行うための方法を理解するために、それをハードコーディングせずに。これは、今、私はの中心にあるナビゲーションバーの下にそれをする「ホーム」などの上に、ナビゲーションの中心部に移動した - これは、実際に働いていたhasnt気づいた:)

a { 
color: #FFF; 
text-decoration: none; 
font-weight: bold; 
position: relative; 
} 

nav a:hover:after { 
    content: ""; 
    display: block; 
    border: 8px solid #405580; 
    border-bottom-color: #fff; 
    position: absolute; 
    left:33%; 
    margin-top: 5px; 
} 

https://codepen.io/daveRanjan/pen/yXyWwR

Answer 2

あなたは:after擬似要素として、あなたの三角形を作成しているので、あなたはそれがnav aへの相対的な位置だ行うことができます。三角形の上にposition: absoluteを置いて、ちょうどあなたがそれを望むようにbottomの位置を調整してください。 nav aの新しいスタイル要素を作成し、それにposition: relativeを追加します。下記参照。

.current { 
 
    color: #FFF; 
 
    text-decoration: underline; 
 
} 
 

 
nav a { 
 
    position: relative; 
 
} 
 

 
nav a:hover:after { 
 
    content: ""; 
 
    display: block; 
 
    border: 8px solid #405580; 
 
    border-bottom-color: #fff; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: -16px; 
 
}

<header> 
 
    <a href="#" id="logo"></a> 
 
    <nav> 
 
    <a href="#" id="menu-icon"></a> 
 
    <ul> 
 
     <li><a href="#" class="current">Home</a></li> 
 
     <li><a href="#">A</a></li> 
 
     <li><a href="#">B</a></li> 
 
     <li><a href="#">C</a></li> 
 
     <li><a href="#">D</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>