[HTML + CSS] li 사이에 구분선 넣기 ex) 메뉴 | 회사소개 | 게시판

HTML

<div class="nav_cat_list">
  <ul class="nav_main_list">
    <h2>Menu List</h2>
    <li><a>cate01</a></li>
    <li><a>cate02</a></li>
    <li><a>cate03</a></li>
    <li><a>cate04</a></li>
    <li><a>cate05</a></li>
    <li><a>cate05</a></li>
    <li><a>cate06</a></li>
    <li><a>cate07</a></li>
  </ul>
</div>

---

CSS

.nav_cat_list{display: flex;}
.nav_cat_list h2{font-size:24px; margin-top: -7px; font-weight:bold; color:#333; }
.nav_main_list{display: flex;margin: 0 15px 8px 15px;border-top: 2px solid #e2e2e2;border-bottom: 2px solid #e2e2e2;padding: 22px 10px 0;}
.nav_main_list li{list-style: none; text-align: center; margin: 0 auto; color:#666; font-weight:600;}
.nav_main_list li:nth-child(n+2) {position: relative;margin-left: 14px; padding-left: 20px;}
.nav_main_list li:nth-child(n+2)::after 

{ position:absolute; left: 0; top: 5px; content: ""; width: 2px; height: 15px; background-color: #ddd;}

.nav_main_list li:hover{color:#f8601d; font-weight:bold;}

 

Comment    - 선택자 뒤에 : 가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 클래스라 합니다.

- 가상요소 ::before, ::after의 정의 ::first-line 요소의 텍스트에서 첫 줄에 스타일을 적용 ::first-letter 요소의 첫 번째 글자에 스타일 적용 ::before 요소의 콘텐츠 시작부분에 생성된 콘텐츠 추가 ::after 요소의 콘텐츠 끝부분에 생성된 콘텐츠 추가 ::selection 요소의 텍스트에서 사용자에 의해 선택(드래그)된 영역의 속성 변경 ::placeholder Input 필드에 힌트 텍스트에 스타일 적용

- 컨텐츠요소 content=""   <!-- HTML 문서에 정보를 포함되지 않은 요소를 CSS에서 새롭게 생성 --> normal 아무것도 표시하지 않는 기본값 string 문자열 생성 image 이미지나 비디오를 불러올 수 있음(크기 조절 불가) counter 순서를 매길 수 있음(counter-increment, counter-reset 함께 사용) none 아무것도 표시하지 않음 attr 해당속성의 속성값 표시