::before ::after content에 대해 쌉 이해 가능

::before ::after content에 대해 쌉 이해 가능

안녕하세요 웹로드케스트입니다.

 

CSS3 가상요소 before, after를 활용한 예제와 content에 대해 쉽게 설명해드리겠습니다.

 

 

1. ::before, ::after 의 차이점

::before - 선택한 element(s) 앞에 가상 콘텐츠 삽입 

::after - 선택한 element(s)s 뒤에 가상 콘텐츠 삽입 

 

See the Pen ::before, ::after diffrent by dadada (@yesna) on CodePen.

예제를 보시면 before를 사용하면  HTML element(태그) 앞에 위치하고

after를 사용하면 HTML element 뒤에 위치하게 됩니다

 

 

 

2. content를 쓰는 이유

가상 요소 before/after를 사용할 때 꼭 같이 사용하는 속성이 content입니다.

content ="" ;

HTML에는 존재하지 않고 CSS에서만 존재하는 가상(가짜) 덩어리입니다.

가상 요소이기 때문에 javascript로 제어하기 어려워요.

 

content 값에 텍스트(특수문자 포함), 이미지 등을 넣어 CSS만으로 가상 요소를 추가할 수 있습니다.

 

 

3. before/after의쓰임새

3-1. float 해제(clearfix)

몇 년 전부터 저는 플로팅 해제할 때 항상 가상요소로 해결하고 있어요

플로팅해제하는 속성 하나 만들어두고 클래스만 추가하면 되니까요.

이렇게 한 번 만들고 나면 정말 쉽고 간단하게 사용할 수 있어요!

.something::after{

  content:'';

  display:table;

  clerar:both;

}

 

 

3-2. bar style

 

See the Pen after pseudo-element divider by dadada (@yesna) on CodePen.

 

codepen으로 예제 코딩해봤습니다.

divider 구분선을 직접 그거라! 위치 크기 색상 등 자유롭게 변경할 수 있습니다.

 

 

3-3. bullet style, 앞 뒤로 꾸밈이 필요할 때

 

See the Pen custom ul list style with pseudo-element by dadada (@yesna) on CodePen.