マウスホバーで下線が伸びてくるシンプルなアニメーションエフェクト
Result
よく見かけますね。疑似要素を使います
css
h1 {
text-align: center;
font-size: 48px;
letter-spacing: 3px;
color: #222;
margin: 20px 0;
}
.underline {
position: relative;
}
.underline:hover,
.underline:focus,
.underline:active {
cursor: pointer;
}
.underline:after {
content: '';
position: absolute;
left: 0;
bottom: -3px;
height: 3px;
background-color: #000;
width: 0;
transition: width .4s;
}
.underline:hover:after,
.underline:focus:after,
.underline:active:after {
width: 100%;
}
|
html
<h1 class="underline">かちびと.net</h1>
|
via
underline effect
