css hoverされた時のテキストの表示

Question

cssでsidebarを作成しています。
hover前は画像だけで、hoverされたら画像とテキストを表示します。
hoverされたら画像とテキストは表示されるのですが、アニメーションの途中でテキストが曲がって表示されてしまいます。
どう修正したらいいでしょうか？
https://codepen.io/ka11taniya/pen/RwRYRdV

Comments

[itzuakniami123]

画像サイズはどのぐらいですか？画像リンクが切れているので実際のサイズが分かりません。

[aaatttt]

返信ありがとうございます！
24 × 24です

Answer 1

Hover時に横幅が確保されない状態でliの内容が表示されるために段落ちしているのだと思われます。
hover時に
ulにoverflow-x:hidden;を追加して、liにwidth:200pxを追加してみてください。

追加

nav:hover {
  width: 200px;
  transition: all 1.3s;
  transition-property: background;
  transition: all 0.2s ease-in-out;
  ul {
    margin-left: 10px;
    align-items: flex-start;
    overflow-x:hidden;
  }
  p {
    display: inline-block;
    margin-left: 10px;
  }
  li{
  width: 200px;   
  }
}

Comments

[aaatttt]

回答ありがとうございます。
上記のを記載しましたがhoverする前の画像が消えてしまいます

[gogoweb_ikeda]

CodepenのCSSは修正済みのものでしょうか？
CSSを追記しましたが外側のli:hoverの200pxを消して上記のようにnav:hoverに追加した場合どうなりますか？

[aaatttt]

修正済みです

[aaatttt]

nav:hoverには元から200pxを記載しています

[gogoweb_ikeda]

nav:hover li に200pxです。

[aaatttt]

折れ曲がって表示されてしまいます

Answer 2

テキストのスタイルに nowrap を指定したらどのようになりますでしょうか。

white-space: nowrap

Comments

[aaatttt]

返信ありがとうございます！
指定しましたが何も変わりませんでした

[plasticgrammer]

提示いただいたコードの確認が不足していました。すみません。

解決にはならないかもしれませんが、li のスタイルとして white-space: nowrap を指定したら、画像と文字間での改行はなくなりました。

[aaatttt]

指定しましたがアニメーション途中では改行されています