css去除a标签hover

CSS双向进度条是指在进度条中心位置设置一个指针，指针会根据进度条的变化而移动，实现双向的进度显示效果。下面介绍如何使用CSS实现这样的进度条。

.progress-bar {
  position: relative;
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
}

.progress-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #4CAF50;
  transition: width 0.5s ease-in-out;
}

.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-left: none;
  border-right: none;
  transform: rotate(45deg) translateY(50%);
}

.progress-bar.progress-bar-reverse::after {
  left: 0;
  right: 50%;
  transform: rotate(-45deg) translateY(50%);
}

.progress-bar.progress-bar-red::before {
  background-color: #f44336;
}

.progress-bar.progress-bar-blue::before {
  background-color: #2196F3;
}

.progress-bar.progress-bar-yellow::before {
  background-color: #FFC107;
}

首先定义一个包含指针和进度条的容器div，指针使用伪元素实现，进度条使用before伪元素实现。设置position为relative，使before伪元素相对于容器进行定位。设置height为进度条的高度，并设置边框半径。将overflow设置为hidden，使超出容器的部分被裁剪掉。

before伪元素的content属性值为空，使之成为一个空元素，使用position:absolute将其相对于容器进行定位。使用top和left属性设置其位置，设置height为100%和background-color为进度条的颜色。使用transition属性控制宽度的变化，实现过渡效果。

使用after伪元素实现指针，使用transform属性设置其旋转和位移。设置border属性为实线，颜色为灰色。设置border-left和border-right为none，使之成为一个三角形。使用rotate和translateY属性调整其方向和位置。

使用progress-bar-reverse类实现反向进度条效果，通过调整after伪元素的left和right属性以及transform属性中的rotate值实现。

使用progress-bar-red、progress-bar-blue、progress-bar-yellow类设置进度条的颜色，通过before伪元素的background-color属性进行实现。