I've encountered an issue while trying to add a ::before pseudo element to list item elements within a Bootstrap Tab.
The pseudo element comes with a CSS animation that can be triggered by toggling the class.
Although everything seems to work, I noticed that every time I switch between tabs, the CSS animation gets triggered. Upon inspecting the DOM, I realized that the pseudo elements are being added or removed each time I change tabs.
As a result, the CSS animation plays every time the tab with the list is opened, which is not the desired behavior.
I'm puzzled as to why this is happening. Shouldn't the CSS still apply to the list items even when their parent tab is not visible? How can I prevent the CSS animation from playing when opening the tab?
.myList {
list-style: none;
}
.myList .state-in {
position: relative;
}
.state-in::before {
content: '';
position: absolute;
left: -30px;
top: 1px;
width: calc(100% + 40px);
height: 24px;
animation: takeInFade 1s ease-in-out;
}
@keyframes takeInFade {
0% { background-color: transparent; }
30% { background-color: #466d2a; }
100% { background-color: transparent; }
}
@keyframes takeOutFade {
0% { background-color: transparent; }
30% { background-color: #7b2d2a; }
100% { background-color: transparent; }
}<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<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">Tab One</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Tab Two</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<ul class="myList">
<li class="state-in">Item One</li>
<li class="state-in">Item Two</li>
<li class="state-in">Item Three</li>
</ul>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Tab Two Content
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Any advice on how to resolve this issue would be highly appreciated! Thanks in advance!