JSFiddle - React, Tailwind, and code Playground

by Tìm ở đây Khoá học CNTT

HTML

<ul id="navlist">
  <li id="home"><a href="https://timoday.edu.vn/category/khoa-hoc/css/"></a></li>
  <li id="prev"><a href="https://timoday.edu.vn/bai-32-dropdowns-trong-css/"></a></li>
  <li id="next"><a href="https://timoday.edu.vn/bai-33-thu-vien-hinh-anh-trong-css/"></a></li>
</ul>

CSS

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites_hover.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites_hover.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites_hover.gif') -91px 0;
}

#home a:hover {
  background: url('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('https://timoday.edu.vn/wp-content/uploads/2021/05/img_navsprites_hover.gif') -91px -45px;
}