Problem Centering Arrows When Using After Selector - html

Question

Currently I am trying to center my arrows that are created using CSS when I hover over my nav menu. Even though I have set the margin left and right to auto. It still does not seem to want to center. It could be because of the format of my HTML. I have tried a number of options but none of them seem to have helped.
Please see my HTML and CSS below:
(Unfortunately I cannot seem to re-create my code but I will post it and continue to try and recreate it in the mean time)
#navbar {
overflow: hidden;
background-color: $base-white;
font-size: 11px;
z-index: 2;
border: 1px solid $base-grey;
height: 50px;
}
.navbar-links {
margin-left: 10em;
height: 100%;
padding: 0em 4em 0em 1em;
min-width: 348px;
margin-top: auto;
margin-bottom: auto;
}
#navbar .navbar-links a {
display: block;
float: left;
color: $base-grey;
padding: 14px 20px 14px 20px;
text-decoration: none;
font-size: 14px;
margin-top: auto;
margin-bottom: auto;
}
#navbar .navbar-links a:hover:after {
content: ' ';
position: absolute;
bottom: -10px;
width: 0;
height: 0;
text-align: center;
border-width: 10px 10px 0;
border-style: solid;
border-color: $base-grey transparent;
margin: 0 auto;
display: block;
}
<div class="navbar-links">
<div class="navbar-dropdown">
<button class="navbar-drop-btn">
<div class="navbar-arrow"></div>
</button>
<div class="navbar-dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a [routerLinkActive]="['navbar-links-active']" [routerLink]="['insights']" (mouseover)="displayInsightDropDown();" (mouseleave)="hideInsightDropDown();">INSIGHTS</a>
<a [routerLinkActive]="['navbar-links-active']" [routerLink]="['explore']">EXPLORE</a>
<a [routerLinkActive]="['navbar-links-active']" [routerLink]="['aboutus']">ABOUT</a>
</div>
Here is a picture of the result:
As you can see the arrow is positioned to the left, but never the center.
Any suggestions would help, thank you in advance.

Answer 1

You need to set the context for the absolutely positioned ::after. To do so, add a non static position (position: relative in this case) to the <a> tags.
To center the ::after element, I've used left: calc(50% - 10px) because the width of the arrow is known (20px). If to arrow can have variable size, you can use:
left: 50%;
transform: translateX(-50%);
.navbar-links {
margin-left: 10em;
height: 100%;
padding: 0em 4em 0em 1em;
min-width: 348px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a {
position: relative; /** the absolute context **/
display: block;
float: left;
color: grey;
padding: 14px 20px 14px 20px;
text-decoration: none;
font-size: 14px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a:hover::after {
left: calc(50% - 10px);
position: absolute;
content: ' ';
bottom: -10px;
width: 0;
height: 0;
border-width: 10px 10px 0;
border-style: solid;
border-color: grey transparent;
display: block;
content: ' ';
}
body {
overflow: hidden;
}
<div class="navbar-links">
INSIGHTS
EXPLORE
ABOUT
</div>

Answer 2

Although answer is accepted but I've another solution using flex property of CSS, add two line inside .navbar-links a
display: flex;
justify-content: center;
no need for calculation
.navbar-links {
margin-left: 10em;
height: 100%;
padding: 0em 4em 0em 1em;
min-width: 348px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a {
position: relative;
/** the absolute context **/
display: flex;
justify-content: center;
float: left;
color: grey;
padding: 14px 20px 14px 20px;
text-decoration: none;
font-size: 14px;
margin-top: auto;
margin-bottom: auto;
}
.navbar-links a:hover::after {
position: absolute;
bottom: -10px;
width: 0;
height: 0;
border-width: 10px 10px 0;
border-style: solid;
border-color: grey transparent;
content: ' ';
}
body {
overflow: hidden;
}
<div class="navbar-links">
INSIGHTS
EXPLORE
ABOUT
</div>