CSS의 :before,:after 선택자를 활용하여 구분선을 만들어보자

:before, :after은 CSS의 가상 요소입니다. CSS3에서는 ::before, ::after로 사용합니다.

예제

<a href="#">1111</a>
<a href="#">222</a>
<a href="#">333</a>

미리보기

1111 222 333

여기에 :before 혹은 :after를 이용해서 각 항목을 구분할 수 있는 디자인을 만들 수 있습니다.

예제 1 - after

a:after{content:" | "}

미리보기

1111 222 333

예제 2 - last-child를 이용하여 마지막 구분자 없애기

a:after{content:" | "}
a:last-child:after{content:"";}

미리보기

1111 222 333

이 글은...

• 2012.09.17 14:04 첫 발행
• 2016.07.25 19:05 수정 및 2차 발행