如何在reactjs图2中显示反转线？

.line {
  width: 100%;
  height: 2px;
  background-color: black;
  position: relative;
}

.line::before {
  content: "";
  width: 50%;
  height: 2px;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
}

.line::after {
  content: "";
  width: 50%;
  height: 2px;
  background-color: white;
  position: absolute;
  top: 0;
  right: 0;
}

import React from "react";
import "./YourComponent.css";

const YourComponent = () => {
  return (
    <div>
      <div className="line"></div>
      {/* 其他组件内容 */}
    </div>
  );
};

export default YourComponent;