*기본 구성
-글자에 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>
실행화면
'HTML & CSS' 카테고리의 다른 글
| 여러개로 구성된 하나의 이미지 중 원하는 영역 배경이미지 사용(spritecow 이미지 좌표 확인 사이트) (0) | 2022.05.16 |
|---|---|
| 이미지의 특정영역 누르면 이동하기(maschek.hu 이미지맵 사이트) (0) | 2022.05.16 |
| 1depth와 2depth 메뉴 만들기 (0) | 2022.05.16 |
| 자식태그 호출 사용법 nth-child(n), nth-of-type(n) (0) | 2022.05.09 |
| table 표 작성법 (0) | 2022.05.09 |
