.list li::after{
content:" ";
width:100%;
display: block;
position: absolute;
height: 2px;
background-color: green;
}
ul li a{
display: inline-block;
padding: 10px 20px;
line-height: 1.5;
font-size: 0.9em;
color: white;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
}
HTML
<ul>
<li><a href="#contact">contact</a></li>
</ul>
マウスliタグを乗り越えたら、その後にライナーを付けたいのですが、このライナーは彼と同じ幅にする必要がありliます。また::after、 `：hoverの後、アクティブにする方法がわかりません。
単純なグラデーションを使用します。
ul li a {
display: inline-block;
padding: 10px 20px;
line-height: 1.5;
font-size: 0.9em;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
margin: 0 2.5px;
background-image:linear-gradient(green,green);
background-size:0% 2px;
background-position:bottom left;
background-repeat:no-repeat;
transition:1s all;
}
a:hover {
background-size:100% 2px;
}<ul>
<li><a href="#contact">contact</a></li>
</ul>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加