0

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>
CodePitbull
  • 75
  • 1
  • 10
  • You know that `::after` is a pseudo element right? You don't actually put `::after` in your HTML markup. Also, you should include the triangle CSS so we can verify the issue. –  Jul 29 '15 at 00:35
  • I have edited the post to include more about this triangle. I don't even know where to find the file to change this PHP/HTML :/ – CodePitbull Jul 29 '15 at 00:42
  • I've edited your code snippet so that the triangle code actually applies to the correct element. Please take care to make sure that your [mcve]s are both ***complete*** and ***verifiable***. However, the only issue that I see why the color of the triangle isn't changing, is well... you didn't change the color. The hover color is the same color as the static color. –  Jul 29 '15 at 00:53

2 Answers2

1

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;
}
kost
  • 705
  • 7
  • 18
  • You triangle is red in default state and you want to change it's color to red on hover. Change the deafult color ::after to black. Here is another fiddle using your updated code: http://jsfiddle.net/kost/guwLshue/ (I changed default state to black). – kost Jul 29 '15 at 01:02
  • This is right answer. Check OP's colour code is all same, ```#E81717```. You can't change colour of hover, unless you using different colour code. – changhwan Jul 29 '15 at 01:06
  • Actually it hovers to yellow from red somewhere still. It's original. I'm trying to make it hover to red. I basically don't want a hover, man I should hav been clear. I need it to remain red :( – CodePitbull Jul 29 '15 at 01:07
  • @CodePitbull you should clarify your question then –  Jul 29 '15 at 01:13
0

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

Petros Kyriakou
  • 5,214
  • 4
  • 43
  • 82
  • Can I not change the HTML? Any other way to make this work? This is from a WP PHP theme, I'm not sure which files this came from – CodePitbull Jul 29 '15 at 00:37
  • why dont you access the styles.css of that particular theme in wordpress editor,find the elements that need to be changed and do the appropriate changes? i don't know how to change that using html and i don't seem to think that its possible.Read more here "http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css", another thing you can do is create a custom.css file and load that file in wordpress. note that the heirarchy for changes to overwrite default you should be loading your custom.css file last. – Petros Kyriakou Jul 29 '15 at 00:40