CSSのletter-spacingを使ったアニメーションで、他の要素を動かしたくない

Question

HTML5/CSS3を使ってウェブページを作成しています。

<ul>
  <li><a>hoge</a></li>
  <li><a>fuga</a></li>
  <li><a>piyo</a></li>
</ul>

<style>
    ul{
        list-style: none;
        display:flex;
        justify-content: flex-end;
        height: 100%;
        align-items: center;
    }

    li{
        padding: 10px 30px;
        margin-right: 3em;

        text-align: center;
        color: gray;
    }

    a{
        text-align: center;
        letter-spacing: 1px;
        cursor: pointer;
        font-size: large;
        transition: all 500ms;
    }

    a:hover{
        letter-spacing: 5px;
        color: black;
    }
</style>

といったCSSを書いて、カーソルを合わせたときに文字間隔が少しだけ開いて色が変わるアニメーションをつけたいのですが、添付画像のように「fuga」に重ねると「hoge」が、「piyo」に重ねると「hoge」と「fuga」が増えた文字幅分ずれてしまいます。。

これをカーソルを合わせた文字だけ動かして、他は場所がズレないようにしたいのですが、どのようにCSSを書けばよいのか分からないので教えてほしいです。

a:hoverの中にmargin-leftやpadding-leftをマイナスで指定したり、widthを切り替えたり、z-indexを変えたりとやってみましたが、動く幅は切り替わるものの完全に動かないといった挙動は実現できませんでした。

よろしくお願いします。

Answer 1

簡単なのはli要素に適切な幅を設定すること。

li{
  padding: 10px 30px;
  margin-right: 3em;
  text-align: center;
  color: gray;
  width: 60px; /* 追加 */
}

Comments

[退会済みユーザー]

ありがとうございます！！
上手く動きました！