Псевдоэлемент before

Прошу подсказать, что я делаю не так, перерыл несколько страниц в гугле и не нашел ответа на вопрос. Хочу сделать кнопку с бликом в хедере сайта, но элемент before даже не выполняется, т.к. смотришь по коду,а он не перемещается. html

<a class="maxbutton-1"/>
 <span class"mb-text">
 </span>
</a>

css

 .maxbutton-1   {
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
    }
    .mb-text:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 1.5em;
      height: 100%;
      background-color: rgba(#fff, 0.6);
      transform: translateX(-4em) skewX(-45deg);
      animation: move-light 1.0s infinite;
        
    }
    @keyframes move-light
    { from 
        transform: translateX(-4em) skewX(-45deg)
      to 
        transform: translateX(10em) skewX(-45deg)}
    .mb-text    {
        font-size:19px;
        background:#de212d;
        border-radius:5px;
        font-weight:400;
        line-height:1;
        margin:0 0 4px;
        padding:10px 20px;
        position: relative;
        box-shadow: 0px 5px 10px 0px #ec9ca1;
        color:#fff;
        transition:all .3s linear 0ms;
        display: inline-block;
        text-decoration: none;
        color: #fff;
        overflow: hidden;
    }

Не уверен, но может есть нюансы с родителями этого элемента?