CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-element
AutoBaker
AutoBaker

Reputation: 1297

css unusual behaviour for :before on hover

I have a wordpress website with this free theme: https://wordpress.org/themes/minimal-grid/

I'm seeing some unusual behaviour, which isn't a problem and I can fix by removing the element, but I don't know why it's happening and would like to understand it.

At the end of each post, there is a link to the previous and next post. When I hover over these, the background of the element darkens slightly. Where there is an image as background, it doesn't disappear, just darkens. Here's a page that demonstrates: https://5diraptor.com/todoist-task-project-manager/

The unusual part is there doesn't seem to be any :hover selectors which actually tells it to do this, so I'd like to understand why it's happening. Below is the HTML:

<nav class="navigation post-navigation" role="navigation" aria-label="Posts">
  <h2 class="screen-reader-text">Post navigation</h2>
  <div class="nav-links">

    <div class="nav-previous">
      <a href="https://5diraptor.com/vivaldi-browser/" rel="prev">
        ::before
        <span class="meta-nav" aria-hidden="true">Previous</span>
        <span class="screen-reader-text">Previous post:</span>
        <span class="post-title">Vivaldi Browser</span>
      </a>
    </div>

    <div class="nav-next">
      <a href="https://5diraptor.com/wordpress-development/" rel="next">
        ::before
        <span class="meta-nav" aria-hidden="true">Next</span>
        <span class="screen-reader-text">Next post:</span>
        <span class="post-title">WordPress Development</span>
      </a>
    </div>

  </div>
</nav>

There's no :hover selectors on any of these elements which change background color. However, when I remove the ::before elements in Chrome Dev tools, the hover transition no longer happens.

What I don't understand is there's no :hover selector on the ::before pseudo-element, and there's no color related CSS applied to this - see screenshot. There's also no event listeners for mouseover so I'm pretty sure this isn't Javascript.

enter image description here

I can't force element state to hover for pseudo-elements so I'm not sure how to debug this any further. Can anyone help me understand why this is happening?

Upvotes: 0

Views: 65

Answers (1)

Aravind Prabash
Aravind Prabash

Reputation: 443

See it has a style for the hover state of the parent nav-previous and the rule applies to the pseudo element when it is hovered.

Upvotes: 1

Related Questions