Click here to Skip to main content
15,882,209 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
<li class="heading  hvr-underline-from-left">1</li>
<li class="hvr-icon-forward">2</li>
<li class="hvr-icon-forward">3</li>
<li class="heading  hvr-underline-from-left">4</li>
<li class="hvr-icon-forward">5</li>
<li class="hvr-icon-forward">6</li>

On mouse hover($("li.hvr-icon-forward").hover) I am able to change the color of the first element (class=.hvr-underline-from-left) which lies above class=hvr-icon-forward

                          function () { $(this).prevAll("li.hvr-underline-from-left:first").css('color', '#006cb4') },

                         function () { $(this).prevAll("li.hvr-underline-from-left:first").css('color', 'black') }


But how can i change the css property of the first element's psuedo element which lies above class=hvr-icon-forward
   .hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #2098d1;
  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;

Exactly I want to change property( right: 0; from right:100%;) in pseudo element class (.hvr-underline-from-left:before) on above mouse hover logic
Updated 8-Aug-15 9:59am

1 solution

Pseudo-elements are not really part of browser DOM - so they can't be targeted directly by JQuery.

Your code
$(this).prevAll("li.hvr-underline-from-left:first").css('color', '#006cb4')

only works because JQuery is using the CSS pseudo selector :first to evaluate and return an actual DOM element.

To achieve desired effect, you should actually look at using[^]

I totally get why you were thinking you could alter use .css() to manipulate the .hvr-underline-from-left:before.

Hope this helps out!

Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900