2

メニュー項目の下線トランジションを作成しようとしています。ホバーすると、素敵な青い下線が左から右に始まります。この投稿の回答に従いました。

これは機能しますが、唯一の問題は、このメソッドが li 要素の幅を 0 に設定するため、長いメニュー項目が 1 行ではなく 2 行に折り返されることです。これはまさに、そのソリューションのコメンター (CBroe) が警告した問題です。彼/彼女は、:after を使用して、各メニュー項目の後に要素を生成し、生成された要素をリンクの下に配置することを提案しました。そうすれば、代わりに生成された要素の幅を拡大および縮小でき、メニュー項目自体はラップされません。

これを行う方法はありますか？これが混乱している場合は申し訳ありませんが、最善を尽くしました。

4

1 に答える 1

7

ここでデモを更新しました

これはcssです：

a { text-decoration: none; display: inline-block; }
a:after {
    content: '';
    display: block;
    border-bottom: 1px solid blue;
    width: 0;
    -webkit-transition: 0.5s ease;
            transition: 0.5s ease;
}
a:hover:after { width: 100%; }
于 2013-04-26T09:38:03.417 に答える