css 悬停前 :before 的异常行为

Question

我有一个带有这个免费主题的 wordpress 网站：https://wordpress.org/themes/minimal-grid/

我看到了一些不正常的行为，这不是问题，我可以通过删除该元素来解决，但我不知道为什么会这样，我想了解它。

在每个post的末尾，上一个post和下一个post都有一个link。当我将鼠标悬停在这些上时，元素的背景会稍微变暗。在有图像作为背景的地方，它不会消失，只会变暗。这是一个演示页面：https://5diraptor.com/todoist-task-project-manager/

不寻常的部分是似乎没有任何 :hover 选择器实际告诉它这样做，所以我想了解为什么会这样。下面是 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>

这些元素中的任何一个都没有改变背景颜色的 :hover 选择器。但是，当我删除 Chrome 开发工具中的 ::before 元素时，悬停过渡不再发生。

我不明白的是 ::before pseudo-element 上没有 :hover 选择器，也没有应用与此相关的 CSS 颜色 - 请参阅屏幕截图。 mouseover 也没有事件侦听器，所以我很确定这不是 Javascript。

我无法强制元素状态悬停 pseudo-element 秒，所以我不确定如何进一步调试它。谁能帮我理解为什么会这样？

Answer 1

看到它有父级悬停状态的样式 nav-previous 并且该规则适用于悬停时的伪元素。

css 悬停前 :before 的异常行为

css unusual behaviour for :before on hover

html

css

css-selectors

pseudo-element