(웹) 밑줄치기 효과/ hover시 밑줄 쳐지는 효과 구현하기(매우 간단)

웹

(웹) 밑줄치기 효과/ hover시 밑줄 쳐지는 효과 구현하기(매우 간단)

공부가싫다가도좋아 2021. 7. 30. 11:47

밑줄 효과 주기

오늘은 마우스를 가져다 댔을때 밑줄이 스르륵 생기는 효과를 구현해 보겠습니다.

position에 대한 이해도만 있다면, 혹은 슬라이드 구현을 해본적이 있다면,

이해하기 매우 쉬울거에요 :)

포스팅 요약

1. 결과

2. 코드

3. 동작 원리

4. 깃허브 코드 다운

[Result]

[Code]

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>
<body>
  <div id="menual">
    <p class="main_tit">원하는 곳에 밑줄 효과 넣기</p>
    <p class="main_content">
      <span class="have_highlight first">밑줄 효과를 어디에 넣을까? 
      <strong class="highlight"> 여기에</strong>
      <br>넣읍시다.</span><br>
      
      <span class="have_highlight second">두 번째 밑줄효과는 어디에 넣을까? 
      <br><strong class="highlight">요기에</strong> 넣읍시다.</span>
  
       <br><span class="have_highlight third">세번째 밑줄효과는?
       <br><strong class="highlight">이쪽에</strong> 넣을 겁니다.</span>
    
       <br><span class="have_highlight fourth">제 블로그 
       <strong class="highlight">코드짜는 문과녀</strong> 많이 사랑해주세요.</span>
  
       <br><span class="have_highlight fifth">도움이 됐다면 
       <strong class="highlight">하트를 꾹</strong> 눌러주세요~</span>      
  </p>
  </div>
</body>
</html>

CSS

#menual{
  width: 100%;
  height:650px;
  padding-left: 400px;
  margin-top: 50px;
}

#menual .main_tit{
  font-size: 2em;
  padding-bottom: 30px;
}

#menual .main_content{
  font-size: 2em;
  line-height: 1.6;
  color: rgb(192,192,192);
}

.first:hover, .second:hover, .third:hover, .fourth:hover, .fifth:hover{
  color: black;
}

.highlight{
  display: inline-table; /*highlight::before과 겹치게 해줌*/
  position: relative;
  overflow: hidden;
}

.highlight::before{
  content:'';
  width: 100%;
  height: 100%;
  background: rgba(236, 98, 78);
  position: absolute;
  top: 40px;
  left: -100%;
  transition: all .35s;

}

.have_highlight:hover .highlight::before{
  left: 0;

}

#menual strong{
  color: black;
}