Having a bit of a tricky situation here, I am dealing with the following class:
<li><a href="test.html" class="hvr-overline-from-left">Test</a></li>
Here is the corresponding CSS:
.hvr-overline-from-left {
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
.hvr-overline-from-left:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
top: 0%;
background: #47953F;
height: 4px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
Desired change when scrolling down:
.hvr-overline-from-leftsmall:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
top: 15%;
background: #47953F;
height: 4px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
Attempted solution:
$(document).ready(function($){
var line = $('.hvr-overline-from-left:before');
$(window).scroll(function () {
if ($(this).scrollTop() > 13.35) {
line.addClass("hvr-overline-from-leftsmall:before");
} else if($(this).scrollTop() >= 0) {
line.removeClass("hvr-overline-from-leftsmall:before");
}
});
});
Unfortunately, this does not work as intended. My question is how can I make this work correctly? I am unsure about which class I should use to modify pseudo elements.