Как закрасить линию перед ползунком через css?

Чтобы закрасить линию перед ползунком через CSS, вы можете использовать псевдоэлемент ::before для создания линии и применить к нему нужные стили. Вот как это можно сделать:

1. Создайте элемент, к которому будет применяться стили, например, <div class="slider"></div>

<div class="slider"></div>

2. Примените базовые стили к элементу и установите ширину и позицию ползунка:

.slider {
  position: relative;
  width: 300px;
  height: 5px;
  background-color: #ccc;
}

.slider:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background-color: #ff0000; /* Цвет линии */
}

3. В примере выше, линия закрашивается красным цветом (#ff0000). Вы можете заменить этот цвет на любой другой по вашему выбору. Также вы можете изменить высоту линии, задав значение свойству height, а ширину можно настроить, устанавливая процентное значение для свойства width.

4. Если вы хотите, чтобы линия выглядела как "прогресс", то вы можете изменить ширину псевдоэлемента ::before при помощи JavaScript или CSS анимации.

.slider {
  /* ... */
  transition: width 0.5s ease; /* Анимация изменения ширины */
}

.slider.active {
  width: 75%; /* Ширина линии после активации */
}

const slider = document.querySelector(".slider");
slider.addEventListener("click", function() {
  this.classList.toggle("active");
});

В данном примере, при клике на элемент .slider, ему будет добавляться класс .active, что будет изменять его ширину на 75% (можно настроить по своему усмотрению). Это может быть полезно, если вы хотите показать прогресс какой-либо операции.