html - 在悬停另一个元素时影响元素位置

Question

目标：将箭头向右移动，同时将鼠标悬停在标题和箭头附近的区域。

问题：无论我使用什么选择器，无论是否使用>，箭头都不会移动。

https://codepen.io/aetrnm/pen/KKmBdpy

a, a:hover, a:visited, a:active {
  color: inherit;
  text-decoration: none;
 }

.container {
  color: #ccc;
  font-size: 12rem;
  height: 100%;
  width: 100%;
  text-align: center;
}

.arrow-next {
  transition: transform 1s ease;
}

.content {
  cursor: pointer;
}

.content:hover {
  color: #aaa;
}

.content:hover .arrow-next {
  transform: translateX(10%);
}

<div class="container">
      <div class="content">
        <div class="title">START</div>
        <a class="arrow-next" href="#">➜&lt;/a>
      </div>
    </div>

标签： htmlcsscss-transforms