pseudo right arrow is not rendering vertically middle

Question

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 reply is appreciated.

Thanks.

score 0 · Answer 1 · answered Jun 19 '20 at 07:02

Please try this css to vertically center the arrow

.nav-pills .nav-link{
    position:relative;
}

.nav-pills .nav-link.active:before{
    position: absolute;
    content: "";
    right: -10px;
    top: 50%;
    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%);
    display:block;
}

hope it works.

pseudo right arrow is not rendering vertically middle

1 Answers1