Pseudo right arrow is not rendering vertically middle

pseudo right arrow is not rendering vertically middle in .nav-link class, please suggest that how I can render my right arrow in vertical middle in a tag.

I tried top:50% but no luck.

HTML

<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>

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;
}

your early replay appreciated.

thanks.

Assuming you have the correct stacking context (the nav link is position relative) then top:50% will place the top edge of the pseudo element arrow at 50% from the top. If you then also add a negative top margin equal to half the arrow’s height it should be centered (margin-top:-7px).

Just noticed you are already using translate to move the element up so you won’t need the margin I mentioned.

You don’t show the code for the anchor which is the stacking context for the arrow so you need to have the anchor as a block element and position:relative set. Also remove the border-style from the arrow as that will give an unwanted border on the right.

Here is the rough idea.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.