My pseudo right arrow is not displaying vertically centered within the .nav-link class. Can anyone suggest how I can achieve vertical alignment for my right arrow in an <a> tag?
I have already attempted using top:50% but it did not work.
Here is the HTML code:
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
Title
<p>Request ID: 12345</p>
<p>Locations: abc</p>
</a>
</li>
And the corresponding CSS:
.nav-pills .nav-link.active:before {
position: absolute;
content: "";
right: -10px;
width: 0;
height: 0;
border-style: solid;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7.5px solid #007bff;
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
vertical-align:middle;
}
You can view the issue image here.
Your prompt response would be highly appreciated.
Thank you.