ホバーするとぬるっと動くリスト
概要
ホバーするとその項目だけぬるっと動き、前にマーカーが表示されるリストです。
視覚的に動くため、どれを選択しているかをわかりやすくすることができるアニメーションです。
実装は、liタグに擬似要素としてマーカーを設定しopacityで表示/非表示を切り替え、aタグのテキストをトランスフォームさせています。
ポイントとしては、aタグの擬似要素としてマーカーを実装していないところです。aタグにマーカーをつけるとホバー時のトランフォームでマーカーも一緒に移動してしまうので、それを避けるために親要素のliタグでマーカーを実装しました。
コードサンプル
HTML
<ul class="list">
<li class="list__item"><a class="list__link" tabindex="0">TEXT</a></li>
<li class="list__item"><a class="list__link" tabindex="0">TEXT</a></li>
<li class="list__item"><a class="list__link" tabindex="0">TEXT</a></li>
</ul>CSS
.list {
padding-inline-start: 0;
border-block: 1px solid #08254f;
list-style: none;
}
.list__item {
position: relative;
padding-block: 0.2em;
line-height: 1;
}
.list__item + .list__item {
border-block-start: 1px solid #08254f;
}
.list__item::before {
position: absolute;
inset-inline-start: 0;
inset-block: 0;
display: block;
width: 0.5em;
height: 0.5em;
margin-block: auto;
content: "";
opacity: 0;
transition: opacity 0.4s, background-color 0.4s;
}
.list__link {
display: block;
padding-inline: 0.6em 1em;
font-size: inherit;
transition: transform 0.4s, color 0.4s;
outline: none;
}
.list__item:has(.list__link:focus-visible)::before {
background-color: #7d8797;
opacity: 1;
}
.list__link:focus-visible {
color: #7d8797;
transform: translatex(0.3em);
}
@media (any-hover) {
.list__item:has(.list__link:hover)::before {
background-color: #7d8797;
opacity: 1;
}
.list__link:hover {
color: #7d8797;
transform: translatex(0.3em);
}
}