为 ::after 伪元素添加悬停答案

【问题标题】：Add hover for an ::after pseudo element为 ::after 伪元素添加悬停
【发布时间】：2022-01-08 17:34:30
【问题描述】：

所以我有以下 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> 元素上添加悬停，它会突出显示我不想要的整个元素 - 我只想突出显示该行。

【问题讨论】：

&:hover:after { background-color: red } 如果我正确理解您的问题。
@ChrisW。我会删除当前的&:hover 还是在它下面添加它？
@ChrisW。那行得通！我在&:after 下方添加了&:hover:after { background-color: $secondary; }。如果您愿意，请提交答案，我会接受。

标签： css sass

【解决方案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;
    }
  }
  }

【讨论】：