How to remove the color boost at the intersection of after and before?

Question

css

Making a cross using pseudo-elements, I encountered the fact that the color changes at the intersection of before and after

$Dark50 : rgba(31, 32, 65, 0.5);
          minus-button {
          height: 30px;
          width: 30px;
          border: 1px solid $Dark50;
          border-radius: 50%;
          position: relative;
          &::before,
          &::after {
            content: '';
            height: 7px;
            width: 2px;
            position: absolute;
            top:50%;
            left:50%;
            background-color: $Dark50;
          }
          &::before {
            transform: rotate(90deg);
          }
        }

Most likely this is due to the transparency of the color. Is there any way to fix this by not using svg and using only pseudo-elements?