- 公開日：
CSS：マウスオーバーで線を引き、マウスが離れると線が消えるエフェクト
マウスを乗せると、要素に沿って線がスーッと現れ、マウスを離すと、現れた線と反対の方向へスーッと消えていくような視覚効果のホバーCSS。
HTML
<p><a href="#" class="linehover">Hover:ホバー</a></p>CSS
.linehover {
position: relative;
font-size: 20px;
font-weight: bold;
padding-bottom: 6px;
}
.linehover:before {
content: " ";
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: #333;
z-index: -1;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease;
}
.linehover:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}デモ
執筆者
astroboy
Webデザイナー&コーダー。HTML/CSS/JavaScript/Vue.js/WebGL/ECサイトなど手広くWeb制作に従事する。現在は東京で活動中。