如何让我的<hr>s的一半与另一半的样式不同？

hr {
  position: relative; /* 设置相对定位，以便对伪元素进行定位 */
  height: 1px; /* 设置水平线的高度 */
  background-color: gray; /* 设置水平线的颜色 */
  border: none; /* 去除水平线的边框 */
}

hr::before,
hr::after {
  content: ""; /* 设置伪元素的内容为空 */
  position: absolute; /* 设置绝对定位 */
  height: 1px; /* 设置虚拟元素的高度与<hr>相同 */
  background-color: red; /* 设置虚拟元素的颜色 */
  border: none; /* 去除虚拟元素的边框 */
}

hr::before {
  width: 50%; /* 设置前半部分虚拟元素的宽度为50% */
}

hr::after {
  width: 50%; /* 设置后半部分虚拟元素的宽度为50% */
  left: 50%; /* 将后半部分虚拟元素向右偏移50% */
}