CSS before&after 컨텐츠 앞뒤 삽입

코딩을 하다가보면 간혹 html 부분에서 놓치거나 자주 바뀌어야하는 부분 혹은 css단에서 이미지 처리해주고 싶거나 혹은 <ol>처럼 순서있는 리스트 형태로 할 때가 있습니다.

이런 부분을 html에서 추가하는게 아닌 css단에서 before,after 속성으로 처리하는 경우가 있습니다. css에서 어떻게 컨텐츠? 내용을 추가할수 있다는 것이지? 가능한것인가? 라고 생각할 수 있지만 content 사용만으로 간단하게 놓친 텍스트 이미지 숫자 등을 쉽게 추가 할 수있는 것 입니다.

간단하게 텍스트로만 표현하자면 [before][해당컨텐츠][after] 이렇게 붙여지는것입니다.

예제를 보면서 추가설명을 하겠습니다.

html

<div> <p>일요일</p> </div>

css

p {width:200px; padding:10px; background:#ccc} p:before {content:'오늘은';} p:after {content:'입니다';}

일요일

일요일 앞에 before content, 일요일 뒤에 after content, 가 입력된 것을 확인 할 수 있습니다. content:'   ' 안에 어떠한 CSS를 적용해도 상관없이 적용이 됩니다. 이미지를 넣어도 상관없습니다.

해당 컨텐츠 앞에 자동으로 번호를 부여할 수 있는 속성을 알아봅시다.

counter-reset > 카운터를 만들거나 재설정입니다.

counter-increment > 카운터 값을 증가시킵니다.

html

<div class="counter">  <p>일요일</p>  <p>월요일</p>  <p>화요일</p>  <p>수요일</p> </div></p>

css

.counter {counter-reset: set;} .counter p {width:200px; padding:10px; background:#ccc} .counter p:before {counter-increment:set; content:'컨텐츠 ' counter(set) ': ';}

일요일

월요일

화요일

수요일

위와같이 ol처럼 순서있는 목록 형태가 되기도 하며 카운터가 되기도 합니다. content안에 컨텐츠 텍스트를 빼고 숫자만 나열해도 무방하구요 사용자분이 어떻게 사용하냐에 따라 다릅니다.

그렇다면 저 카운터만 디자인을 입혀보겠습니다.

.counter p:before {counter-increment:set; content:' ' counter(set) ''; background:#f8585b; color:#fff; padding:5px; display:inline-block;}

일요일

월요일

화요일

수요일

해당 디자인 외에 before 숫자 카운터 목록만 css입력이 가능하여 검색어 같은 부분에 따로 숫자 이미지를 넣을 필요가 없습니다. 단 몇줄 css면 가능한 디자인을 굳이 이미지를 사용하면서 부하를 일으킬 필요가 없는것 입니다. 1줄의 css로 포토샵에서의 이미지 공수를 들일 필요가 없는것 이 이 before & after, counter 의 장점 이기도 합니다.

예로 위와같은 형식만 표현했을 뿐이지 사용방법은 정말 무궁무진합니다.