Text apeare behind the background

1

I hada text with white color background to be transparent in the normal status , in the hover status the background grows from the side from 0 to100% in width , the problem is when this hover effect takes place the white background covers the text , i tries with the z-index for the text but it still doesnt show , any solution ?

.branches_text {
    position: absolute;
    width: 100%;
    top: 220px;
    right: 0;
    font-size: 320%;
    font-weight: 400;
    color: transparent;
    transition: color 1s .5s;
    
}

.branches_text:hover {
    color: black;
}

.branches_text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    background-color: #ffffff;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .2s, width .4s .2s;
}

.branches_text:hover::before {
    transform: scaleY(1);
    width: 100%;
}
2

Without a link to visualize what’s happening with the code, it’s hard to figure out.