형광팬 밑줄 효과 넣기

형광팬 효과 넣기

1. <mark>태그 사용하기

mark태그를 사용하면 노란색 밑줄이 생성된다.

// jsx
<div>
  형광팬 <mark>효과</mark>
</div>

2. 밑줄 색상 변경하기

// jsx
<div>
  형광팬 <mark className='blue'>효과</mark>
</div>

/* scss */
.blue{
  background-color: blue;
}

3. 밑줄에 그라데이션 넣기

// jsx
<div>
  형광팬 <span className='gradient'>그라데이션 효과</span>
</div>

/* scss */
.gradient {
  background-image: linear-gradient(to right, rgb(155, 219, 245) 0%, rgb(144, 110, 221) 100%);
}

4. half 밑줄 넣기

: full밑줄 중 상단 50%는 opacity를 0으로 만들기

// jsx
<div>
  형광팬 <span className='half-highlight'>반 효과</span>
</div>

/* scss */
.half-highlight {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, #3d83f3 50%);
}

5. 밑줄에 애니메이션 넣기 (스크롤 반응 또는 호버)

1) 왼쪽에서 오른쪽으로 그어지는 밑줄

<div>
  <span className='rtl'>rigt to left 효과</span>
</div>

/* scss */
.rtl {
  position: relative;
    &::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0px;
    height: 2px;
    width: 0px;
    transition: all 350ms ease-in-out;
    opacity: 0;
    background-color: rgb(231, 59, 116);
  }
  &:hover {
    &::after {
      width: 100%;
      opacity: 1;
    }
  }
}

2) 위에서 떨어지는 밑줄

<div>
  <span className='rtl'>rigt to left 효과</span>
</div>

/* scss */
.drop {
  position: relative;
  &::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 2px;
    transition: all 350ms ease-in-out;
    opacity: 0;
    background-color: rgb(231, 59, 116);
  }
  &:hover {
    &::after {
      bottom: -4px;
      opacity: 1;
    }
  }
}