如何将下划线从中心而不是从左开始悬停? [英] How to hover underline start from center instead of left?

问题描述

我有一个 ul 列表，并且我已经使用:after 给出了悬停效果，这在悬停时效果很好，但是现在我希望它将从中心开始而不是左.

I have a ul list and there i have given hover effect using :after this is working fine on hover, but now i want to it will be start from center instead of left.

我的代码:

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>

推荐答案

快速解决方案:

将原始位置移动到 left:50％，然后在悬停时将其移动到 left:0 .

Move the original position to left:50% and then, on hover, move it to left:0.

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: 50%;
  bottom: -2px;
  width: 0px;
  height: 2px;
  background: #333;
  transition: all 0.45s;
}

ul.my-list li:hover:after {
  width: 100%;
  left: 0;
}

ul.my-list li a:hover {
  text-decoration: none;
}

<ul class="my-list">
  <li><a href="#">Welcome to my website</a></li>
</ul>

这篇关于如何将下划线从中心而不是从左开始悬停?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！