메뉴에 hover시 글자 아래에 밑줄 생기기(transition)

HTML & CSS

메뉴에 hover시 글자 아래에 밑줄 생기기(transition)

07a 2022. 5. 16. 02:24

*기본 구성

-글자에 position:relative 주기

-a::after{positon:absolute;}을 통해 따라가게 만들고 처음 width를 0으로 설정

-hover됐을시 after에 transition되어 width가 점차 자연스럽게 커지게 만들기

CODE

<!DOCTYPE html>
<html lang="ko">
<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">
    <title>Document</title>
    <style>
        ul{width: 500px; margin:50px auto 0;list-style: none;}
        ul>li{float: left;width: 100px;}
        ul>li>a{text-decoration: none;color:inherit;
        display: block; height: 40px;line-height: 40px; text-align: center;position: relative;}
        ul>li>a::after{content:''; display: block;width: 0px; height: 2px;background:red;position: absolute;left:50%; top:45px; transform:translateX(-50%);}/*밑줄만들기*/
        ul>li:hover>a::after{width: 100px;transition: width 0.45s;}
    </style>
</head>
<body>
    <ul>
        <li><a href="#">기관</a></li>
        <li><a href="#">사업</a></li>
        <li><a href="#">후원</a></li>
        <li><a href="#">참여</a></li>
        <li><a href="#">소식</a></li>
    </ul>
</body>
</html>

실행화면