Блог

Главная - Вопросы по программированию - Запуск анимации подчеркивания CSS по центру вместо левой

Запуск анимации подчеркивания CSS по центру вместо левой

#html #css

#HTML #css

Вопрос:

У меня есть 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>

Ответ №1:

Быстрое решение:

Переместите исходную позицию в left:50% , а затем, при наведении курсора мыши, переместите ее в 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>

Ответ №2:

Вы можете упростить свой код, используя фон, как показано ниже

 ul.my-list {
  margin: 20px;
  padding: 0px;
  width: 200px;
}

ul.my-list li {
  list-style: none;
  display: inline-block;
  padding-bottom:2px; /*the space for the gradient*/
  background: linear-gradient(#333,#333) center bottom; /*OR bottom right OR bottom left*/
  background-size: 0% 2px; /*width:0% height:2px*/
  background-repeat:no-repeat; /* Don't repeat !!*/
  transition: all 0.45s;
}

ul.my-list li a {
  color: #333;
  text-decoration: none;
}


ul.my-list li:hover {
  background-size: 100% 2px; /*width:100% height:2px*/
}  
 <ul class="my-list">
  <li><a href="#">Welcome to my website</a></li>
</ul>

Ответ №3:

Это просто, вы вызываете элемент после того, как осталось 50%, что означает, что это жлоб слева в середину, когда вы наводите курсор на элемент после ширины 100% и влево 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%; /* change this code 0 to 50%*/
  bottom: -2px; 
  width:0px; 
  height: 2px; 
  background: #333; 
  transition: all 0.45s;
}
ul.my-list.rtl li:after { right: 0; left: inherit; }
ul.my-list li:hover:after{ left:0; width: 100%;} /* add poperty 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>
<h2>left start and end right</h2>
<ul class="my-list rtl">
  <li><a href="#">Welcome to my website</a></li>
</ul>

= = = Спасибо = = =