<div class="info">
  <h1>CSS Underline</h1>
  <p>밑줄을 아름답게 만들어보기</p>
</div>

<div>
  <p>
    <span class="underline1">달이 익어가니 서둘러 젊은 피야</span>민들레 한 송이 들고 
    사랑이 어지러이 떠다니는 밤이야 날아가 사뿐히 이루렴
  </p>
  <p>
    팽팽한 어둠 사이로 떠오르는 기분
    <span class="underline2">이 거대한 무중력에 혹 휘청해도 두렵진 않을 거야</span>
  </p>
  <p>
    푸르른 우리 위로 커다란 strawberry moon 한 스쿱
    나에게 너를 맡겨볼래 eh-oh
  </p>
  <p>
    <a href="#" class="underline3">바람을 세로질러 날아오르는 기분 so cool</a>
    <a href="#" class="underline4">삶이 어떻게 더 완벽해 ooh</a>
  </p>
  <strong> 아이유 - strawberry moon</strong>
</div>

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

body {
  font-family: 'Pretendard-Regular';
  background-color: #F0F0EB;
  text-align: center;
}

.info {
  margin: 100px;
}

.underline1 {
  cursor: pointer;
  color: #7DD4E7;
  
  /*2개 그라디언트 underline 만드는 방법*/
 background-image: 
   linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188)),
    linear-gradient(#E5FAFF, #7DD4E7);
  background-size: 100% 2px, 100% 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat, no-repeat;
  transition: background-size 700ms linear;
}

.underline1:hover {
  background-size: 0 2px, 100% 2px;
}

.underline2 {
   cursor: pointer;
  color: #fc00ff;
  
  /*3개 그라디언트 underline 만드는 방법*/  
    background-image: 
      linear-gradient(#FFF, #F0F0EB),  
      linear-gradient(#fc00ff, #00dbde),
      linear-gradient(#A1FFCE, #FAFFD1);
  background-size: 20px 2px, 100% 2px, 0 2px;
  background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 2s linear, background-position 2s linear;
}

.underline2:hover {
  background-size: 20px 2px, 0 2px, 100% 2px;
  background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
}

.underline3 {
  text-decoration: underline 2px #004FF9;
  transition: text-decoration-color 300ms;
}

.underline3:hover {
  text-decoration-color: #FFF94C;
}

.underline4 {
  text-decoration: underline 2px #FFF94C;
  text-underline-offset: 0;
  transition: text-decoration-color 300ms, text-underline-offset 800ms;
}

.underline4:hover {
  text-decoration-color: orange;
  text-underline-offset: 4px;
}

strong {
  display: block;
  margin: 50px;
  color: #d7d2cc;
  font-size: 14px;
}