CSS: перед тем, как псевдоэлемент не будет отображаться в течение одного h1

Question

Я знаю, что есть другие вопросы, связанные с этим. Но я не могу дать ответы на эти работы. У меня есть 3 разные страницы, на каждой из которых есть элемент h1, имеющий псевдоэлемент в стиле :before. На двух страницах h1:before работает просто отлично, но на последней он вообще не отображается в DOM.

//mixin
@mixin pageHeading($left, $bottom, $width) {
  content: "";
  left: $left;
  bottom: $bottom;
  width: $width;
  height: 1px;
  position: absolute;
  border-bottom: 0.25rem solid #38495a !important;
}


//WORKING
//styles
.projects {
   #heading {
    position: relative;

    &:before {
      @include pageHeading(40%, -0.2em, 20%);
    }
  }
}
//html
<div className='container projects d-flex flex-column'>
      <h1 className='mt-3 mb-5' id='heading'>Projects</h1>

//NOT WORKING
//stlyes
.contact {
   #heading {
    position: relative;

    &:before {
      @include pageHeading(40%, -0.2em, 20%);
    }
  }
}
//html
<div className='container d-flex flex-column contact'>
      <h1 className='mt-3 mb-5' id='heading'>Contact Me</h1>