テキストの下線を両端に展開するcss効果
4022 ワード
ここでの効果はscale属性を用いて中心点を現在の要素の中心に拡大縮小することで実現される.
html
css
html
<ul>
<li class="active"> li>
<li> li>
ul>
css
ul,li{
list-style:none;
}
li{
display: inline-block;
position: relative;
line-height: 40px;
}
li:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
opacity: 0;
border-bottom: 5px solid #0b72ff;
transform: scaleX(0);
transition: 0.2s ease-in-out;
}
li.active:after, li:hover:after {
opacity: 1;
transform: scaleX(1);
}