側滑列表．list

...
<section>
  <ul>
    ...
    <li>
      <div class="text">文字內容 文字內容 文字內容</div>
      <div class="icon"><a href="#"><i>❮</i></a><a href="#"><i>✎</i></a><a href="#"><i>✖</i></a></div>
    </li>
    ...
  </ul>
</section>
...

…
li:focus-within{
  /* 父元素: 列表項目（li） */
  transform: translateX( var(--icon-x-start) );
  background-color: var(--black-10)
}
…
li .icon a:focus{
  /* 子元素: 列表項目的箭頭圖示（❮） */
  background-color: var(--black-30);
  color: #fff;  
}