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>

CSS：在伪元素未出现一个h1之前

0 个答案: