CSS content는 string뿐만 아니라 image, counter, attr 또한 값으로 지정할 수 있다.

content 속성 값 리스트

string

값이 문자열인 속성

::before{
	content: “텍스트”;
}

image

값이 이미지인 속성으로 url("이미지경로") 를 입력한다. 또한 이미지 로드 실패시 보여줄 대체텍스트를 / 로 구분하여 넣을 수 있다.

::before{
	content: url("이미지경로");
	content: url("이미지경로")/"대체 텍스트";
	content: linear-gradient(#aaa, #ddd);
}

counter

자동으로 번호를 매길 수 있는 변수로 CSS규칙에 따라 값이 증가 또는 감소한다.

counter

ol{
	/* 구현 할 conuter의 초기값 지정 */
	counter-reset: 함수명;
    list-style: none;
}

li::before{
	/* 카운터 값을 1씩 증가시킨다. */
	counter-increment: 함수명;
	/* 카운터 값을 표시한다. */
	content: counter(함수명);
}

counters

중첩된 다른 레벨의 카운터를 텍스트를 삽입하여 분리를 할 수 있다.

ol{
	/* 구현 할 conuter의 초기값 지정 */
	counter-reset: 함수명;
 	list-style: none;
}

li::before{
	/* 카운터 값을 1씩 증가시킨다. */
	counter-increment: 함수명;
	/* 카운터 값을 표시한다. */
	content: counters(함수명, "-") " ";
}

attr

요소의 속성을 문자열로 변환하여 브라우저에 보여준다.

<p title=“가사” data-text="마르고 닳도록” > 
	동해물과 백두산이
</p>

p::before{
	/* attr의 값과 문자열 “ - ” 출력 */
	content: attr(title) " - ";
}
p::after{
	/* attr의 값 도출 */
	content: attr(data-text);
}

🧚‍♀️
나는 CSS의 content 속성을 주로 가상요소 선택자인 ::after, ::before 에 문자열 또는 빈 값으로 넣어 스타일링 용도로만 사용했다. 하지만 content의 값으로 문자열 이외에도 다양한 값들이 들어 갈 수 있다는 것을 배웠고 필요시에 유용하게 사용되어질 것 같아 기록하고 싶다는 욕구가 솟았다!!
자주 사용하는 속성들은 아니지만 필요시에 잊지말고 사용해보고 싶다.

📝 Reference

• css 카운터 사용하기 MDN