Seongwon Lim

[HTML/CSS] 글자 호버링 시 밑줄 효과 구현하기 본문

HTML-CSS

[HTML/CSS] 글자 호버링 시 밑줄 효과 구현하기

limsw 2022. 5. 8. 17:19
반응형

들어가기

해당 포스팅 글에서는 텍스트에 마우스를 호버링 했을 때 밑줄이 나타나는 애니메이션을 구현하고자 한다. 또한 호버(hover) 효과를 적용할 때 밑줄이 나타나는 모습은 다양하게 존재한다. 이번 글에서는 왼쪽에서 오른쪽, 오른쪽에서 왼쪽, 중앙에서 퍼져나가기 3가지 예제를 살펴볼 것이다.

이와 같은 텍스트가 존재할 때 HTML 코드는 다음과 같이 간단하게 구현할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Hover Effect</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <div class="gnb">
        <a href="#">Navigation Hover Effect</a>
    </div>
</body>
</html>

필자는 나타나는 밑줄을 가상 요소 선택자를 이용해서 구현했다. 마우스가 호버링 되지 않았을 때에는 가상 요소 선택자를 보이지 않게 하고, 호버링 시 특정 시간동안 가상 요소 선택자가 서서히 나타나게끔 구현하는 것이 핵심이다.

 

이제 마우스 호버링 시 나타나는 이펙트를 구현해보자.

1. 중앙에서 퍼져나가기

가운데서 퍼져나가는 효과를 주기 위해서는 CSS 파일을 다음과 같이 정의할 수 있다.

.gnb a {
    font-size: 28px;
    position: relative;
    text-decoration: none;
    color: #000000;
    
    /*텍스트에서 밑줄 간격 띄우기*/
    padding-bottom: 5px;
}

.gnb a:before {
    content: '';
    position: absolute; /*부모 요소에는 position: relative를 주어야 한다.*/
    background-color: crimson;
    height: 2px; /*밑줄 굵기*/

    width: 0; /*초기에 보이지 않도록*/
    bottom: 0; /*a태그 아래에 위치시키기*/
    transition: 0.7s; /*애니메이션 동작 실행 시간 정의*/

    /*가상 요소를 가운데로 이동시키기*/
    left: 50%;
    transform: translateX(-50%) ;
}

/*태그가 호버링 되면 가상 요소의 크기를 100%로 키우기*/
.gnb a:hover:before {
    width: 100%;
}

before, after 가상 요소는 inline 요소이기 때문에 크기 값을 가질 수가 없다. 따라서, position: absolute 속성을 주어야 크기 값을 가질 수 있도록 만들 수 있다. 그 다음은 가상 요소를 초기에 가운데에 배치시키고 보이지 않게 하는 것이 중요하다.


left, transform을 이용해서 요소를 가운데로 이동시키고 초기 width를 0으로 주어 보이지 않게 하였다.

 

마지막으로 호버링 되었을 때 width를 100%로 늘려 밑줄이 자연스럽게 나타나도록 구현했다.

2. 왼쪽에서 오른쪽으로 퍼져나가기

.gnb a:before {
    content: '';
    position: absolute; /*부모 요소에는 position: relative를 주어야 함*/
    background-color: crimson;
    height: 2px;

    width: 0; /*초기에 보이지 않도록*/
    bottom: 0; /*a태그 아래에 위치*/
    transition: 0.7s; /*애니메이션 동작 실행 시간 정의*/
}

.gnb a:hover:before {
    width: 100%;
}

위와 같이 구현할 수 있으며 또는 .gnb a:before {} 안에 left: 0를 정의해도 된다. left: 0의 의미는 해당 요소의 왼쪽 끝에 위치시킨다는 뜻이다.

3. 오른쪽에서 왼쪽으로 퍼져나가기

.gnb a:before {
    content: '';
    position: absolute; /*부모 요소에는 position: relative를 주어야 함*/
    background-color: crimson;
    height: 2px;

    width: 0; /*초기에 보이지 않도록*/
    bottom: 0; /*a태그 아래에 위치*/
    transition: 0.7s; /*애니메이션 동작 실행 시간 정의*/
    right: 0;
}

.gnb a:hover:before {
    width: 100%;
}

반대로 오른쪽에서 퍼져나가게 하기 위해서는 right: 0를 주어 처음에 가상 요소를 오른쪽 끝에 위치시키면 된다.

'HTML-CSS' 카테고리의 다른 글

[HTML/CSS] 가상 요소 :before :after 개념 및 사용 방법  (0) 2022.07.22
[HTML/JS] 버튼 클릭 시 페이지 맨 위로 이동하기  (0) 2022.07.18
[HTML/CSS] box-sizing 개념 및 사용 방법  (0) 2022.07.14
[HTML/CSS] 드롭다운(Drop-down) 애니메이션 구현하기  (0) 2022.05.10
[HTML/CSS] 블러(Blur) 애니메이션 구현하기  (0) 2022.05.09
'HTML-CSS' Related Articles more
Comments