[HTML/CSS] :before, :after 태그

- 메뉴에서 구분선을 넣을때는 img 태그와 span 태그 모두 사용해도 되지만 좀 더 깔끔한 구현을 위해서는 :before를 사용한다.

- 반대되는 개념인 :after도 있다.

- display와 content는 꼭 넣어줘야하는 요소이다.

- content 항목: 글자를 넣는다. (여기서는 선만 넣기때문에 영역만 지정해주는 용도로 공백이다.)

 

.util > li:before {
    display: inline-block;
    content: "";
    width: 1px;
    height: 10px;
    background-color: #e1e1e1;
    margin-right: 10px;
}

 

 

결과화면

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.