화살표
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.crumbs {width:1200px;margin: 0 auto 30px;overflow:hidden; text-align: center; display: inline-table; }
.crumbs li span { display: block; padding-top: 11px; }
.crumbs li { position: relative; display: inline; float: left; height: 60px; width: 295px; background-color:#edeff0; margin: 0 5px 0 0; font-size: 16px; text-decoration: none; padding-left: 30px; }
.crumbs.step5 li { width: 215px; }
.crumbs li:after { content: ""; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid #edeff0; position: absolute; right: -30px; top: 0; z-index: 1; color: #fff; }
.crumbs li:before { content: ""; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid #fff; position: absolute; left: 0; top: 0; color: #fff; }
/* .crumbs li:first-child:before { display: none; } */
.crumbs li:first-child:after { padding-left:1px; }
/* .crumbs li:last-child:after { display: none; } */
.crumbs li:first-child { padding-left: 20px; border-radius: 3px 0 0 3px; }
.crumbs li:last-child { padding-right: 20px; border-radius: 0 3px 3px 0; }
.crumbs li:hover a { text-decoration: underline; }
.crumbs li.active { background-color:#3280bc; color:#fff; cursor: default; font-weight: bold; }
.crumbs li.active:after { border-left: 30px solid #3280bc; cursor: default; }
.crumbs li.visited { background: #e1f6ff;color:#fff; }
.crumbs li.visited:after { border-left: 30px solid #e1f6ff; }
.crumbs li.active:before, .crumbs li.visited:before { border-left: 30px solid #fff; }
</style>
</head>
<body>
<ol class="crumbs">
<li class=""><span>01</span>Submitter</li>
<!-- <li><span>02</span>Project</li>
<li><span>03</span>Project Scope</li> -->
<!-- <li><span>04</span>Overview</li> -->
</ol>
</body>
</html>
호버시 밑줄 에니메이션
See the Pen XWKZBqg by LeeEugene1 (@leeeugene1) on CodePen.
반응형
'Frontend > css' 카테고리의 다른 글
| table colspan rowspan 예시 (0) | 2021.09.08 |
|---|---|
| width 100%를 하려면 flex grow를 사용해보자 (0) | 2021.08.31 |
| inline과 block (0) | 2021.05.19 |
| 익숙하지않은 css 리스트 (0) | 2021.05.17 |
| 유투프 풀사이트 iframe (0) | 2020.10.29 |
