我有一个带有给定悬停效果的 ul
,使用 :after
实现。这很好用,但我想让它从中间开始而不是左边。
我的代码:
ul.my-list{ margin: 20px; padding: 0px; width: 200px;}
ul.my-list li{ list-style: none; position: relative; display: inline;}
ul.my-list li a{ color:#333; text-decoration: none;}
ul.my-list li:after{ content: ''; position: absolute; left: 0px; bottom: -2px; width:0px; height: 2px; background: #333; transition: all 0.45s;}
ul.my-list li:hover:after{ width: 100%;}
ul.my-list li a:hover{ text-decoration: none;}
<ul class="my-list">
<li><a href="#">Welcome to my website</a></li>
</ul>