加一个鼠标放上去有个线条左右滑动的效果

你需要在 CSS 中使用 `::before` 和 `::after` 伪元素来实现这种效果。下面是一个简单的 CSS 代码示例：

.slider {
  position: relative;
  height: 2px;
  background-color: #000;
}

.slider::before,
.slider::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000;
}

.slider::before {
  left: -10px;
}

.slider::after {
  right: -10px;
}

.slider:hover::before {
  left: 0;
}

.slider:hover::after {
  right: 0;
}

这个代码将创建一个 `div` 元素，当鼠标放在上面时，它的左右两侧将出现一个圆圈，并且线条会向左右扩展到圆圈上。你可以根据需要自定义样式。