ホバーで右矢印が出るリスト

<ul class="list-hover-arrow">
  <li><a href="#">料金プランを見る</a></li>
  <li><a href="#">導入事例を読む</a></li>
  <li><a href="#">よくある質問</a></li>
</ul>

.list-hover-arrow {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.list-hover-arrow li {
  margin-bottom: 14px;
}

.list-hover-arrow a {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #2563eb;
  font-weight: 500;
  padding-right: 18px;
  transition: all 0.2s ease;
}

.list-hover-arrow a::after {
  content: '→';
  position: absolute;
  right: 0;
  opacity: 0;
  transition: all 0.2s ease;
}

.list-hover-arrow a:hover::after {
  opacity: 1;
  transform: translateX(4px);
}