/* styles.css */
.hover-box {
    position: relative;
    padding: 20px 40px;
    background-color: transparent;
    color: black;
    overflow: hidden;
    z-index: 0;
    border-right: 1px rgba(0,0,0,1);
}

.hover-box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 100%;
    background-color: red;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease;
    z-index: -1;
}

.hover-box:hover::before {
    width: 100%;
}