Затухание на псевдоэлементе с CSS

Question

Итак, я хочу, чтобы мой псевдоэлемент :: before исчезал при наведении курсора. Он затухает как следует, но затухание вообще не работает. Я попробовал все решения здесь, но ни одно из них, похоже, не работает. Это что-то конкретное c для псевдоэлементов? Заранее спасибо!

.navigation {

margin-right: 6rem;


&__list {
    list-style: none;
    display: flex;
    justify-content: space-around;        
    color: $color-grey-light;
    font-weight: 300;
    width: 30vw;
}

&__item {
    font-size: 2.2rem;
    transition: all .2s;
    position: relative;

    &:hover {
        color: $color-white;
    }

    &::before {
        content: "";
        width: 1rem;
        position: absolute;
        color: $color-blue;
        transform: translateY(3.6rem);
        border-radius: 1rem ;
        background-color: $color-black-light;
        opacity: 0;
        transition: all .3s ease-out;
    }

    &:hover::before {
        background-color: $color-blue;
        height: .5rem;
        left: 15%;
        width: 70%;
        opacity: 1;
        transition: all .3s;            
    }}

Answer 1

Посмотрите, намеренно ли вы это делаете.

Установка псевдоэлемента необходима для настройки content: '';. Кроме того, вам пришлось удалить transition из :hover::before, чтобы позволить переходу работать с мышью.

Наконец, были правила, которые нужно было держать как при наведении, так и при мышлении, например width, height и left.

.navigation {
  margin-right: 6rem;
  $color-grey-light: #555;
  $color-white: #fff;
  $color-blue: #00F;
  $color-black-light: #333;

  &__list {
    list-style: none;
    display: flex;
    justify-content: space-around;
    color: $color-grey-light;
    font-weight: 300;
    width: 30vw;
    border: 1px solid black;
  }

  &__item {
    font-size: 2.2rem;
    transition: all 0.2s;
    position: relative;

    &:hover {
      color: $color-white;
    }

    &:before {
      content: "";
      width: 1rem;
      left: 15%;
      height: 0.5rem;
      position: absolute;
      background-color: $color-blue;
      transform: translateY(3.6rem);
      border-radius: 1rem;
      opacity: 0;
      transition: all 0.3s ease-out;
    }

    &:hover:before {
      content: "";
      background-color: $color-blue;
      height: 0.5rem;
      left: 15%;
      width: 70%;
      opacity: 1;
    }
  }
}

---

<div class="navigation">
  <ul class="navigation__list">
    <li class="navigation__item">Item 1</li>
    <li class="navigation__item">Item 2</li>
    <li class="navigation__item">Item 3</li>
  </ul>
</div>

https://codepen.io/nilo-c-sar-teixeira/pen/xxwLYgL