Trying to resolve an SVG issue I'm having that involves hiding and showing

I just figured out. 1.)

.wraph.active .linesa::before,
.wraph.active .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: green;
}

.wraph.active .linesa::after {
  left: 399px;
}



.wraph.active .linesb::before,
.wraph.active .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: red;
}

.wraph.active .linesb::after {
  top: 399px;
}