content

content (콘텐츠)

::before 와 ::after 가상 요소의 콘텐츠를 설정하는 content 유틸리티예요. 옆에서 함께 짚어 드릴게요.

출처: 문서

본문

ClassStyles

클래스	스타일
`content-[<value>]`	`content: <value>;`
`content-(<custom-property>)`	`content: var(<custom-property>);`
`content-none`	`content: none;`

Examples

Basic example

before 와 after 변형과 함께 content-[<value>] 문법을 사용해서 ::before 와 ::after 가상 요소의 콘텐츠를 설정할 수 있어요.

<p>
  Higher resolution means more than just a better-quality image. With a Retina 6K display,
  <a class="text-blue-600 after:content-['_↗']" href="...">Pro Display XDR</a>
  gives you nearly 40 percent more screen real estate than a 5K display.
</p>

Referencing an attribute value

attr() CSS 함수를 사용해서 속성에 저장된 값을 참조하려면 content-[attr(<name>)] 문법을 사용해요.

<p before="Hello World" class="before:content-[attr(before)] ...">
  <!-- ... -->
</p>

Using spaces and underscores

HTML에서는 공백이 클래스의 끝을 나타내므로, 임의 값(arbitrary value) 안의 공백은 모두 밑줄(underscore)로 바꿔 줘야 해요.

<p class="before:content-['Hello_World'] ..."></p>

실제 밑줄을 포함해야 한다면 백슬래시로 이스케이프하면 돼요.

<p class="before:content-['Hello\_World']"></p>

Using a CSS variable

CSS 변수를 사용해서 ::before 와 ::after 가상 요소의 콘텐츠를 제어하려면 content-(<custom-property>) 문법을 사용해요.

<p class="content-(--my-content)"></p>

이는 content-[var(<custom-property>)] 의 축약형으로, var() 함수를 자동으로 추가해 주는 문법이에요.

Responsive design

content 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<p class="before:content-['Mobile'] md:before:content-['Desktop'] ..."></p>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.