[CSS] :before,:after 활용하기 - 구분선

예제

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

미리보기

1111 222 333

여기에 :before를 이용해서, 혹은 :after를 이용해서 구분자를 만들어봅니다. 처음에는 :after를 사용하곘습니다.

예제 1 - after사용 (CSS)

a:after{content:" | "}

미리보기

1111222333

예제 2 - 마지막의 구분자 없애기

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

미리보기

1111222333