CODEWITHSUNDEEP
htmlcsstransitionfont-awesome-5
Nael M.
Nael M.

Reputation: 43

I want to Add Font Awesome icon before each link in of a links list then animate only the icon by moving it to the right when the link is hovered

I want only the right arrow (the Awesome font icon '\f105') to move smoothly to the right when the link is hovered and to keep the text unmoving. with my code all the line is moving to the right, can you please help to fix the line and only allow the icon of the "right arrow" to move to the right when the line is hovered. Thank you

.links-block ul>li a:before{

    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: inline-block;
    content: '\f105';
    padding-right: 5px;
    transition: all .2s cubic-bezier(.7,0,.3,1); 

   
   }

   .links-block ul>li a:hover:before{
    padding-left: 30px ;

   }
.links-list li>a {
    text-decoration: none;
    }
.link-text:hover {
    text-decoration: underline;
    }

.links-list {

    list-style: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
</head>
<body>
    <div class="links-block">
        <ul class="links-list">
        <li> <a href="https://stackoverflow.com/" > <span class="link-text">The portal</span>  </a></li>
        <li><a href="https://stackoverflow.com/company" > <span class="link-text"> About the company </span></a></li>
        </ul>
    </div>



</body>
</html>

Upvotes: 1

Views: 932

Answers (1)

doğukan
doğukan

Reputation: 27431

Use translate instead of padding.

.links-block ul>li a:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  display: inline-block;
  content: '\f105';
  padding-right: 5px;
  transition: all .2s cubic-bezier(.7, 0, .3, 1);
}

.links-block ul>li a:hover:before {
  transform: translateX(10px);
}

.links-list li>a {
  text-decoration: none;
}

.link-text:hover {
  text-decoration: underline;
}

.links-list {
  list-style: none;
}
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

<div class="links-block">
  <ul class="links-list">
    <li>
      <a href="https://stackoverflow.com/"> <span class="link-text">The portal</span> </a>
    </li>
    <li>
      <a href="https://stackoverflow.com/company"> <span class="link-text"> About the company </span></a>
    </li>
  </ul>
</div>

Upvotes: 2

Related Questions