Pseudo right arrow is not rendering vertically middle

HTML & CSS
1

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

image
image1100×364 25.3 KB

your early replay appreciated.

thanks.

2

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

3

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.

4

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