How do you make a background in the form of a progress bar?



  • How do you make these blocks? введите сюда описание изображения



  • The numbers on the right side, I understand, are not static, so we use the dope for them. <span>♪ Well, you could use another round of pseudlement?

    * {
      margin: 0;
      padding: 0;
    }
    ul {
      width: 250px;
      list-style: none;
      border-left: 2px solid #7db4c9;
    }
    li {
      position: relative;
      margin: 5px 0;
      padding: 5px;
    }
    li::before {
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      height: 100%;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
      z-index: -1;
    }
    li span {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
    }
    li:nth-child(1)::before {
      background: #b2e19b;
      width: 80%;
    }
    li:nth-child(2)::before {
      background: #abe2f7;
      width: 25%;
    }
    li:nth-child(3)::before {
      background: #abe2f7;
      width: 15%;
    }
    <ul>
      <li>Ручное бронирование <span>11</span>
      </li>
      <li>Пакетные туры <span>3</span>
      </li>
      <li>Отели <span>1</span>
      </li>
    </ul>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2