프론트엔드개발 cssbefore을 활용하여 h1테그 꾸미기 (2)

                                    html

<body>
  <main>
     <h1>FAVORITE <strong>FOOD</strong> </h1>
  </main>
</body>

                                    scss

body{
  ---//이전글 참고
   main{
   ---//이전글 참고
     h1{
       position: absolute;
       top: -50px;
      }
   }

}

                                    scss
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap');

//부모요소생략
     h1{
       position: absolute;
       top: -50px;
       font: 35px/1.2 "Rajdhani" ;
       opacity: 0.7;

      }

                                    scss
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap');

//부모요소생략
     h1{
       ---//위참고

        &::before{

        &::before {
            content: "";
            display: block;
            background: #777;
            position: absolute;
            top: -10px;
            width: 5vw;
            height: 1px;

        }
     }
   }