CODEWITHSUNDEEP
htmlcsshover
CodePitbull
CodePitbull

Reputation: 75

Change hover color on ::after?

I'm unable to change the color of a hover on a ::after.
I was able to change the color of the ::after to red from black without hover.

The ::after is actually an arrow transformed from previous CSS coding. It's supposed to point the <span>Issues</span> expanding a drop down menu.

.sf-with-ul:after {
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -3px;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top-color: #DFEEFF;
  border-top-color: rgba(255, 255, 255, 0.5);
}

/*top menu issues*/
.nav-menu-item-357 .sf-with-ul span{
  color:#E81717;
}
.nav-menu-item-357 .main-menu-link.sf-with-ul::after {
  border-top-color:#E81717;
}
/*THIS 3rd LINE DOES NOT WORK:*/
.nav-menu-item-357 .main-menu-link.sf-with-ul:hover:after {
  border-top-color:#E81717;
}
<ul style="position: relative;">
    <li class="nav-menu-item-357 main-menu-item  menu-item-even menu-item-depth-0 new_dropdown_style menu-item menu-item-type-custom menu-item-object-custom">
        <a href="#" class="menu-link main-menu-link sf-with-ul">    
            <span>Issues</span>
        </a>
    </li>
</ul>

Upvotes: 0

Views: 897

Answers (2)

kost
kost

Reputation: 730

Looks like your code works (3rd line).

Here is the fiddle (I added some classes to display your menu element): http://jsfiddle.net/kost/4k0ebxnz/

.nav-menu-item-357 .main-menu-link.sf-with-ul:hover:after {
    border-top-color:#E81717;
}

Upvotes: 1

Petros Kyriakou
Petros Kyriakou

Reputation: 5343

Consider the following

<span class="span">test</span>

to add an arrow on that span after test you would do something like the following in css:

span:after {
    content: '->'
}

now to change the color of the arrow on hovering you must do the following

span:hover:after {
    color:red;
}

working fiddle here

jsfiddle link

Upvotes: 0

Related Questions