2019年01月9日(水)

「リンクにマウスホバーでアニメーションしながら下線表示」で行をまたげるようにする

• 0
• 5
• 6
• 18

Result

リンクにマウスを乗せるとアニメーションエフェクト付きで下線表示する、みたいなやつですが、検索して出てくる疑似要素を使う手だと行をまたいだ時にうまく表示できないみたいです
サンプル上が従来の疑似要素を使った方法でサンプル下が行をまたいでも解決できる方法です

あまり通常のテキストに用いることも多くないと思うので、これで困ってる方がいるかは分かりませんが。

css

/*▼ 疑似要素を使ってアンダーラインを表示する方法*/ .demo_1 a { text-decoration: none; position: relative; } .demo_1 a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; border-bottom: 2px solid red; transition: .3s; } .demo_1 a:hover:after { width: 100%; } /*▼ 行をまたいでも動作する方法*/ .demo_2 a { text-decoration: none; bac...