JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<ul id="zornet_rutikan">
      <li><a href="#">ZORNET.RU</a></li>
      <li><a href="#">ZORNET.RU</a></li>
      <li><a href="#">ZORNET.RU</a></li>
      <li><a href="#">ZORNET.RU</a></li>
</ul>

CSS

#zornet_rutikan li {
 display: inline;
 list-style: none;
 padding: 0;
         }

#zornet_rutikan li a {
 
border: 1px solid white;
padding: 15px 20px 15px 20px;
text-decoration: none;
color:black;
margin-left: -5px;
/* Фон для анимации */
background-image: url('https://image.prntscr.com/image/H-4oRSk4S3Kq-UC5FcBhYA.jpg');
/* Выравниваем фоновое изображение по левому краю */
background-position: left;
-webkit-transition: all 0.8s ease-in-out;
/* Анимация с  transition для Firefox (еще не поддерживается) */
-moz-transition: all 0.8s ease-in-out;
/* Анимация с  transition для  Opera )*/
-o-transition: all 0.8s ease-in-out;
          }
          
#zornet_rutikan li a:hover {
 color: white;
 background-position:right;
            }