How can I position a white triangle at the bottom of my horizontal menus when they are hovered/activated? The triangle should be aligned to the right-most corner of the menu, not the center. Adding CSS "left: 50%;" positions it in the center of the menu bar/screen. Here is the code snippet: Html:
<div class="navbar-collapse collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white">Privacy</a>
</li>
</ul>
</div>
CSS:
li.nav-item a:hover::after {
content: "";
height: 0;
width: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
position: absolute;
/*left:50%;*/
bottom: 0;
}
Update1: The image below shows that the triangle is in the bottom-right corner of "Home" instead of centered below the menu. The same happens when hovering over "Privacy". https://i.sstatic.net/tBAGx.png
Update2: Adding ".text-center" to either "li" or "a" does not solve the issue.
Thank you in advance!