The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS hover is delayed because of ::after ::before

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #185529


    I got a simple menu with a triangle above my list menu to make it look good. Right so,
    Whenever I hover over the first list item (which has the triangle above it, done with CSS with content) the triangle turns to another color(blue) which I have done with ::before:hover. Problem is that the triangle now turns blue before the list item turns blue. It’s logic becuase it is the ::before:hover effect but how do I make this possible for both of these to turn color at the same time. Since I need the content:” attribute to display my triangle I need to use the ::before or ::after with hover?

    Any suggestions

    I created a very, very quick codepen just to show my problem…

    Remeber that this is codepen is just to show you how to solve this problem. I have built similar with better styling to my real menu in my drupal site.

    Please be nice…lol :-)


    Simplest solution would be to put the first class on the li, instead of on the a.

    If that’s not practical, I would position the a to take up the full width and height of the li (so both hover states are triggered at the same time).

    Please be niceā€¦lol :-)

    “nice”? “nice”??!? : p

    Seriously, I hope you weren’t really worried.
    If so, we’re giving the wrong impression around here.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.