在悬停时填充整个有角度的li标记

.angled-li {
  position: relative;
  padding-left: 20px; /* 调整li标记的左内边距，以便给伪元素留出空间 */
}

.angled-li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0; /* 设置伪元素的背景颜色 */
  border-left: 2px solid #ccc; /* 设置伪元素的左边框样式 */
  transform: skew(-20deg); /* 通过skew变形属性使伪元素倾斜 */
  transition: background-color 0.3s ease; /* 设置过渡效果 */
}

.angled-li:hover::before {
  background-color: #ccc; /* 设置悬停时伪元素的背景颜色 */
}