[CSS] :before, :after에 counter()를 사용하여 숫자 리스트 표현하기

위와 같은 리스트를 html, css로 표현할 때,

실제 태그에 숫자를 적지 않고 가상클래스에 counter()를 사용하여 표현할 수 있다.

1. counter-reset : 카운터이름  시작숫자

/* Set "my-counter" to 0 */
counter-reset: my-counter;
 
/* Set "my-counter" to -1 */
counter-reset: my-counter -1;
 
/* Set "counter1" to 1, and "counter2" to 4 */
counter-reset: counter1 1 counter2 4;
 
/* Cancel any reset that could have been set in less specific rules */
counter-reset: none;
 
/* Global values */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;

브라우저 지원 :

Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Basic support	Full support2	Full support12	Full support1	Full support8	Full support9.2	Full support3.1	Full support2	?	Full supportYes	Full support25	Full support10	Full support3.2	?

2. counter-increment : 카운터이름  증가할숫자

counter-reset에서 설정한 시작값에서 숫자를 얼마씩 증가시킬 지 지정할 수 있다.

/* Increment "my-counter" by 1 */
counter-increment: my-counter;
 
/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;
 
/* Increment "counter1" by 1, and decrement "counter2" by 4 */
counter-increment: counter1 counter2 -4;
 
/* Do not increment/decrement anything: used to override less specific rules */
counter-increment: none;
 
/* Global values */
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;

브라우저 지원 :

Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Basic support	Full support2	?	Full support1	Full support8	Full support9.2	Full support3	?	?	Full supportYes	?	?	?	?

3. counter(name, [style])

• name: 카운터의 이름
• style: 생략 가능 / disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin,. armenian, georgian, lower-alpha, upper-alpha 사용 가능 / 기본값은 decimal(십진수)

- 예시 -

HTML)

<ol class="item_list">
	<li>
		공부하기
		<ol class="detail_list">
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
		</ol>
	</li>
	<li>
		시장보기
		<ol class="detail_list">
			<li>우유</li>
			<li>계란</li>
		</ol>
	</li>
	<li>운동하기</li>
</ol>

CSS)

.item_list { 
	counter-reset: todolist; 
}
.item_list li { 
	list-style: none; 
	line-height: 20px;
	margin-bottom: 10px;
}
.item_list li:before { 
	counter-increment: todolist; 
	content:"(" counter(todolist) ") "; 
}
.detail_list {
	counter-reset: detail;
}
.detail_list li:before {
	counter-increment: detail; 
	content:counter(todolist) "-" counter(detail) ". "; 
}