SCSS hover에서 특정 자식 요소의 속성 변경

<div class="content">
  <p class="content__text">下線付き</p>
  <p class="content__text--red">下線付き＋赤文字</p>
</div>

.content {
  height: 100px;
  width: 200px;
  border: solid 1px;
  text-align: center;
}

구현 방법

부모 요소에 : hover 의사 클래스 적용

.content {
  height: 100px;
  width: 200px;
  border: solid 1px;
  text-align: center;
  &:hover {
    text-decoration: underline;
  }
}

두 번째 자식 요소만의 속성을 변경하는 방법?

.content:hover > .content__text--red {
  color: red;
}

.content {
  height: 100px;
  width: 200px;
  border: solid 1px;
  text-align: center;
  &:hover {
    text-decoration: underline;
  }
  &:hover > &__text--red {
    color: red;
  }
}

끝에