为 ::after 伪元素添加悬停

Question

所以我有以下一段 SCSS 代码：

  ul {
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      a {
        color: $primary;
        &:hover {
          color: $secondary;
        }
      }
      padding: 10px;
      &:hover {
        transform: translateY(-3px);
      }
    }
    &:after {
      content: '';
      display: block;
      width: 1px;
      height: 90px;
      margin: 0 auto;
      background-color: $primary;
    }
  }

::after 为我在前端添加了一行。

有什么方法可以将背景颜色应用于 ::after 悬停效果？如果我将悬停添加到 <ul> 元素，它会突出显示我不想要的整个元素 - 我只想突出显示该行。

Answer 1

只需为ul添加悬停效果并更改::after背景颜色，检查以下代码，您的问题将得到解决。

ul
{
&:hover
      {
        &:after
        {
          background-color:$secondary;
        }
      }
}

完整代码

ul {
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      a {
        color: $secondary;
        &:hover {
          color: red;
        }
      }
      padding: 10px;
      &:hover {
        transform: translateY(-3px);
      }
    }
    &:after {
      content: '';
      display: block;
      width: 1px;
      height: 90px;
      margin: 0 auto;
      background-color: $primary;
    }
  &:hover
  {
    &:after
    {
      background-color:$secondary;
    }
  }
  }

为 ::after 伪元素添加悬停

Add hover for an ::after pseudo element

css

sass