有没有办法让":hover“的背景颜色变宽？

.element {
  position: relative;
  background-color: #f00;
}

.element:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%; /* 调整宽度来实现背景颜色变宽 */
  height: 100%;
  background-color: #f00;
  z-index: -1;
}

.element {
  background: linear-gradient(to right, #f00 0%, #f00 50%, transparent 50%, transparent 100%);
  background-size: 200% 100%; /* 调整背景大小来实现背景颜色变宽 */
  background-position: right;
  transition: background-position 0.3s ease;
}

.element:hover {
  background-position: left;
}