Within my anchor tag, there are two elements: a fontawesome Icon and a hidden span that only appears when the anchor is hovered over. The problem arises on my website when the hidden span is displayed inline causing the parent anchor to increase in height. This occurs regardless of text size adjustments such as reducing the font-size or line-height of the span.
I have attempted to isolate the code for the issue but have been unable to replicate it. Here is the code nonetheless:
:root {
--darkblack: #000615;
--black: #0B1721;
--lightblack: #141B37;
--yellow: #F7C921;
--darkyellow: #a28b2a;
--cyan: #21B7FF;
--darkcyan: #1c7eaf;
--magenta: #FF217D;
--darkmagenta: #531a3b;
}
.nav {
align-items: flex-end;
}
.nav-pills .nav-link {
width: fit-content;
}
.nav-pills .nav-link.active {
color: var(--black) !important;
background-color: var(--cyan);
}
.nav-pills .nav-link:not(.nav-link.active) {
color: var(--cyan) !important;
cursor: pointer;
}
.nav-pills .nav-link:hover > .nav-title {
display: inline !important;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac8c5c5ded9ded8cbdaea9f849a8498">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="row">
<div class="col-10">
</div>
<div class="col-2">
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
<i class="fa-solid fa-book"></i>
<span class="d-none nav-title">Test</span>
</a>
</li>
<li>
<a class="nav-link" data-id="tags">
<i class="fa-solid fa-tags"></i>
<span class="d-none nav-title">Tags</span>
</a>
</li>
</ul>
</div>
</div>I meticulously reviewed each CSS rule related to the icon, text, and span to identify any rules causing the issue, but disabling them did not resolve the problem. The only rule that had an impact was
.fa-classic, .fa-regular, .fa-solid, .far, .fas {
font-family: "Font Awesome 6 Free";
}
This rule is sourced from the FontAwesome library, and removing it would break the icon functionality. I am struggling to pinpoint the root cause of this issue. Any insights would be greatly appreciated.
For reference, here is a visual depiction of the problem on my site: https://i.sstatic.net/KPSYskRG.gif